JS dynamically add option and delete option (with instance code)

1. Dynamically create select

Copy the codeThe code is as follows:

 
function createSelect(){ 
var mySelect = ("select"); 
 = "mySelect"; 
(mySelect); 
} 

2. Add option option

Copy the codeThe code is as follows:

 
function addOption(){ 
//Finding the object based on id,
var obj=('mySelect'); 
//Add an option
(new Option("text","value")); //This can only be valid in IE
(new Option("text","value")); //This is compatible with IE and firefox
} 

3. Delete all options

Copy the codeThe code is as follows:

 
function removeAll(){ 
var obj=('mySelect'); 
=0; 
} 

4. Delete an option option

Copy the codeThe code is as follows:

 
function removeOne(){ 
var obj=('mySelect'); 
//index, to delete the sequence number of the option, here is the sequence number of the currently selected option
var index=; 
(index); 
} 

5. Get the value of option option

Copy the codeThe code is as follows:

 
var obj=('mySelect'); 
var index=; //Serial number, take the currently selected option number,
var val = [index].value; 

6. Obtain the text of option option

Copy the codeThe code is as follows:

 
var obj=('mySelect'); 
var index=; //Serial number, take the currently selected option number,
var val = [index].text; 

7. Modify option option

Copy the codeThe code is as follows:

 
var obj=('mySelect'); 
var index=; //Serial number, take the currently selected option number,
var val = [index]=new Option("new text","new value");

8. Delete select

Copy the codeThe code is as follows:

 
function removeSelect(){ 
var mySelect = ("mySelect"); 
(mySelect); 
} 

The complete code of the entire instance is as follows:

Copy the codeThe code is as follows:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http:///TR/html4/"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return (id) 
} 
function show() 
{ 
var selectObj=$("area") 
var myOption=("option") 
("value","10") 
(("Shanghai"))
var myOption1=("option") 
("value","100") 
(("Nanjing"))
(myOption) 
(myOption1) 
} 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
if(val==10) 
{ 
var i=$("context").-1; 
var remobj=$("context").childNodes[i]; 
(true) 
var sh=("select") 
(new Option("Pudong New Area","101"))
(new Option("Huangpu District","102"))
(new Option("Xuhui District","103"))
(new Option("Putuo District","104"))
$("context").appendChild(sh) 
} 
if(val==100) 
{ 
var i=$("context").-1; 
var remobj=$("context").childNodes[i]; 
(true) 
var nj=("select") 
(new Option("Xuanwu District","201"))
(new Option("Baixia District","202"))
(new Option("Xiaguan District","203"))
(new Option("Qixia District","204"))
$("context").appendChild(nj) 
} 
} 
function calc() 
{ 
var x=$("context").-1; 
alert(x) 
} 
function remove() 
{ 
var i=$("context").-1; 
var remobj=$("context").childNodes[i]; 
(true) 
} 
</script> 
<body> 
<div > 
<select  onchange="choice()"> 
</select> 
</div> 
<input type=button value="Show" onclick="show()">
<input type=button value="calc()">
<input type=button value="delete" onclick="remove()">
</body> 
</html> 

Improved version: Add, modify, and delete option elements in select

Copy the codeThe code is as follows:

 
function watch_ini(){ // Initial
for(var i=0; i<; i++){ 
var word = ("OPTION"); 
 = arguments[i]; 
(word); // watch. is form name 
} 
} 
function watch_add(f){ // Add
var word = ("OPTION"); 
 = ; 
(word); 
} 

However, the above add() method is only valid under IE. To be compatible with FF and Opera, the above code has been improved. The code after the change is as follows:

Copy the codeThe code is as follows:

 
function watch_ini(){ // Initial
for(var i=0; i<; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // Add
var oOption=new Option(,); 
[]=oOption; 
} 

The complete code of the entire instance is as follows:

Copy the codeThe code is as follows:

 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title>javascript select options text value</title> 
<meta name="keywords" content="javascript select options text value add modify delete set"> 
<meta name="description" content="javascript select options text value add modify delete set"> 
<script language="javascript"> 
<!-- 
function watch_ini(){ // Initial
for(var i=0; i<; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // Add
var oOption=new Option(,); 
[]=oOption; 
} 
function watch_sel(f){ // Edit
 = [].text; 
} 
function watch_mod(f){ // Modify
[].text = ; 
} 
function watch_del(f){ // Delete
(); 
} 
function watch_set(f){ // Save
var set = ""; 
for(var i=0; i<; i++){ 
set += [i].text + ";"; 
} 
confirm(set); 
} 
//--> 
</script> 
</head> 
<body> 
<form name="watch" method="post" action=""> 
<select  name="keywords" size="10" onchange="watch_sel()"></select><br> 
<script language="javascript"> 
<!-- 
watch_ini("I","you","you","he","she","it","el"); // Initial keywords
//--> 
</script> 
<input type="text" name="word" /><br /> 
<input type="button" value="add" onclick="watch_add();" />
<input type="button" value="Modify" onclick="watch_mod();" />
<input type="button" value="delete" onclick="watch_del();" />
<input type="button" value="Save" onclick="watch_set();" />
</form> 

Create an array method with a string:

Copy the codeThe code is as follows:

 
<script language="javascript"> 
</body> 
</html> 
<script> 
functionspli(){ 
datastr="2,2,3,5,6,6"; 
varstr=newArray(); 
str=(","); 
for(i=0;i< ;i++ ) { 
(str[i]+"<br/>"); 
} } spli(); 
</script> 