Improved version: Add, modify, and delete option elements in select_form effects

After returning from home today after taking annual leave, I saw the "Monitoring and Management Demonstration Code" posted by Xiao Lin on QQ. The core principle is the add() method of the select element:

Copy code The code is as follows:

function watch_ini(){ // Initial
for(var i=0; i var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // Add
var word = document.createElement("OPTION");
word.text = f.word.value;
f. keywords.add(word);
}

But the above add() method is only valid under IE. In order to be compatible with FF and Opera, the above code has been improved. The modified code is as follows ：

Copy code The code is as follows:

function watch_ini(){ // Initial
for(var i=0; i var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect").options[ i]=oOption;
}
}
function watch_add(f){ // Add
var oOption=new Option(f.word.value,f.word.value);
f.keywords.options[f.keywords.length]=oOption;
}

The complete code of the entire instance is as follows:

<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"> <form name="watch" method="post" action=""> <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"> </select><input type="text" name="word"> <input type="button" value="增加" onclick="watch_add(this.form);"> <input type="button" value="修改" onclick="watch_mod(this.form);"> <input type="button" value="删除" onclick="watch_del(this.form);"> <input type="button" value="保存" onclick="watch_set(this.form);"> </form>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]