简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

JS dynamically add option and delete option (with example code)_javascript skills

WBOY
Release： 2016-05-16 17:38:47
Original
1374 people have browsed it

1. Dynamically create select

Copy code The code is as follows:

function createSelect(){
var mySelect = document.createElement("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.getElementById('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. Remove all options option
Copy code The code is as follows:

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

4. Delete an option option
Copy code The code is as follows:

function removeOne(){
var obj=document.getElementById('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
Copy the code The code is as follows:

var obj=document.getElementById('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 the code The code is as follows:

var obj=document.getElementById('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.getElementById('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.getElementById("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("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("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.getElementById("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

















用一个字符串创建一个数组方法:
复制代码 代码如下:

Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！