Commonly used codes for js operations select and option_Basic knowledge

1. Get the value and text of the selected selection. The html code is as follows :

Copy code Code As follows:

one
two
three

You can use the following script code s Get the selected value and text

Copy code The code is as follows:

$("#mySelect" ).val(); //Get the value of the selected record
$("#mySelect option:selected").text(); //Get the text value of the selected record

2. Use the new Option("text","value") method to add option option

Copy code code As follows:

var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3. Delete all options option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");obj.options.length = 0;

4. Delete the selected option option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options .remove(index);

5. Modify the selected option option

Copy code The code is as follows:

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option( "three",3); //Change the corresponding value
obj.options[index].selected = true; //Keep the selected state

6. Delete select

Copy code The code is as follows:

var obj = document.getElementById("mySelect") ;
obj.parentNode.removeChild(obj); //Remove the current object

7. Select the selected response event

Copy code The code is as follows:

$("#mySelect").change(function(){ //Add what needs to be executed Operation code})

1. Dynamically create select

Copy code The code is as follows:

function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body. appendChild(mySelect);
}

2. Add option option

Copy code The code is as follows:

function addOption(){
//Find objects based on id,
var obj=document.getElementByIdx_x('mySelect');
//Add an option
obj.add(new Option("text","value")); //This is only valid in IE
obj.options.add(new Option("text", "value")); //This is compatible with IE and firefox
}

3. Delete all options option

Copy code The code is as follows:

function removeAll(){
var obj=document.getElementByIdx_x('mySelect');
obj .options.length=0;
}

4. Delete an option option

Copy the code The code is as follows:

removefunctionOne(){
var obj=document.getElementByIdx_x('mySelect');
//index, to delete the serial number of the option, here take the serial number of the currently selected option
var index=obj .selectedIndex;
obj.options.remove(index);
}

5. Get the value of option

Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex ; //Serial number, take the serial number of the currently selected option
var val = obj.options[index].value;

6. Get the text of the option

Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index].text;

7. Modify option option

Copy code The code is as follows:

var obj=document.getElementByIdx_x('mySelect ');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index]=new Option("new text", "new value");

8. Delete select

Copy code The code is as follows:

function removeSelect(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

The complete code of the entire instance is as follows:

Copy the code The code is as follows:

改进版：在select中添加、修改、删除option元素

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar word = document.createElement_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}

但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：

复制代码 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar oOption=new Option(arguments[i],arguments[i]);
document.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}

整个实例的完整代码如下：

复制代码 代码如下:

用一个字符串创建一个数组方法:

复制代码 代码如下:

今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现

复制代码 代码如下:

obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox

因为这段代码，在网上查资料收藏了这篇文章，实时的温故js
共勉！