Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > JS dynamically add option and delete option (with example code)_javascript skills

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

WBOY
Release： 2016-05-16 17:38:47
Original
1394 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

















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

Latest Articles by Author
Latest Issues
SQL Count() also requires 0 I have only one table and I want to count each entry of a tag that starts with 0. Now I tr...
From 2024-04-06 19:48:53
0
1
449
sql groupby not working, I want to group by code_branch ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...
From 2024-04-06 19:24:49
0
2
488
An error was encountered while trying to retrieve the latest version of a package from search.maven.org "Error: Unable to retrieve data from Maven repository" while retrieving latest v...
From 2024-04-05 12:11:23
0
1
1471
Modify matSelect style when displaying options How to change properties of mat-select when option is on? <mat-selectclass="select...
From 2024-04-05 09:23:19
0
1
1374
Echo inside div with nested echo I'm trying to use echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*...
From 2024-04-04 11:09:23
0
1
390
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved