Home >Web Front-end >JS Tutorial >js operation select and option (explanation with examples)_javascript skills

js operation select and option (explanation with examples)_javascript skills

WBOYOriginal: 2016-05-16 17:08:061093browse

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(){

//Add an option

obj.add(new Option("text","value")); //This is only valid in IE

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 code The code is as follows:

function removeOne(){

var obj=document.getElementByIdx_x('mySelect');

//index, the serial number of the option to be deleted, here take the serial number of the currently selected option

var index=obj.selectedIndex;

obj.options.remove(index);

}

5. Get the value of option
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 option

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

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 instance The code 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; i   var 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;
}

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

复制代码代码如下:

javascript select options text value

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

复制代码代码如下: