1. Dynamic creation of SELECT
function Createselect () {
var myselect = document.createelement ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}
2. Add Options option
function AddOption () {
Find objects by ID,
var Obj=document.getelementbyid (' Myselect ');
Add an option
Obj.add (New Option ("text", "value")); This only works in IE.
Obj.options.add (New Option ("text", "value")); This compatible with IE and Firefox
}
3. Remove all options option
function RemoveAll () {
var Obj=document.getelementbyid (' Myselect ');
obj.options.length=0;
}
4. Delete an option
function Removeone () {
var Obj=document.getelementbyid (' Myselect ');
Index, to remove the ordinal of the option, take the ordinal of the currently selected option
var Index=obj.selectedindex;
Obj.options.remove (index);
}
5. Get the value of option options
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index].value;
6. Get the text of options option
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index].text;
7. Modify Options option
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal, take the ordinal of the currently selected option
var val = obj.options[index]=new Option ("New text", "New value");
8. Delete Select
function Removeselect () {
var myselect = document.getElementById ("Myselect");
MySelect.parentNode.removeChild (Myselect);
}
The complete code for the entire instance is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//ZH-CN" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html" >
<script language=javascript>
function $ (ID)
{
return document.getElementById (ID)
}
Function Show ()
{
var selectobj=$ ("area")
var myoption=document.createelement ("option")
Myoption.setattribute ("Value", "10")
Myoption.appendchild (document.createTextNode ("Shanghai"))
var myoption1=document.createelement ("option")
Myoption1.setattribute ("value", "100")
Myoption1.appendchild (document.createTextNode ("Nanjing"))
Selectobj.appendchild (myoption)
Selectobj.appendchild (MyOption1)
}
function Choice ()
{
var index=$ ("area"). SelectedIndex;
var val=$ ("area"). Options[index].getattribute ("value")
if (val==10)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var sh=document.createelement ("select")
Sh.add (New Option ("Pudong", "101"))
Sh.add (New Option ("Huangpu", "102"))
Sh.add (New Option ("Xuhui", "103"))
Sh.add (New Option ("Putuo", "104"))
$ ("context"). AppendChild (SH)
}
if (val==100)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var nj=document.createelement ("select")
Nj.add (New Option ("Xuanwu District", "201"))
Nj.add (New Option ("Baixia District", "202"))
Nj.add (New Option ("Xiaguan District", "203"))
Nj.add (New Option ("Qixia District", "204"))
$ ("context"). AppendChild (NJ)
}
}
Function Calc ()
{
var x=$ ("context"). Childnodes.length-1;
Alert (x)
}
function Remove ()
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
}
</script>
<body>
<div id= "Context" >
<select id= "area" onchange= "Choice ()" >
</select>
</div>
<input Type=button value= "show" onclick= "Show ()" >
<input Type=button value= "Compute node" onclick= "Calc ()" >
<input Type=button value= "Remove" onclick= "Remove ()" >
</body>
Improved version: Add, modify, and delete option elements in select
function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var word = document.createelement ("OPTION");
Word.text = Arguments[i];
Watch.keywords.add (word); Watch. is form name
}
}
function Watch_add (f) {//Increase
var word = document.createelement ("OPTION");
Word.text = F.word.value;
F.keywords.add (word);
}
However, the above add () method is only valid under IE, for the compatibility of FF and opera, the above code is improved, the following code is changed: function Watch_ini () {//Initial
for (var i=0; i<arguments.length; i++) {
var ooption=new Option (Arguments[i],arguments[i]);
document.getElementById ("Myselect") [I]=ooption;
}
}
function Watch_add (f) {//Increase
var ooption=new Option (F.word.value,f.word.value);
F.keywords[f.keywords.length]=ooption;
}
The complete code for the entire instance is as follows:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<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<arguments.length; i++) {
var ooption=new Option (Arguments[i],arguments[i]);
document.getElementById ("Myselect") [I]=ooption;
}
}
function Watch_add (f) {//Increase
var ooption=new Option (F.word.value,f.word.value);
F.keywords[f.keywords.length]=ooption;
}
function Watch_sel (f) {//Edit
F.word.value = F.keywords[f.keywords.selectedindex].text;
}
function Watch_mod (f) {//Modify
F.keywords[f.keywords.selectedindex].text = F.word.value;
}
function Watch_del (f) {//delete
F.keywords.remove (F.keywords.selectedindex);
}
function Watch_set (f) {//Save
var set = "";
for (var i=0; i<f.keywords.length; i++) {
Set + = F.keywords[i].text + ";";
}
Confirm (set);
}
-
</script>
<body>
<form name= "Watch" method= "post" action= "" >
<select id= "myselect" name= "keywords" size= "ten" onchange= "Watch_sel (this.form)" ></select><br>
<script language= "JavaScript" >
<!--
Watch_ini ("I", "You", "You", "he", "she", "it", "er"); Initial keywords
-
</script>
<input type= "text" name= "word"/><br/>
<input type= "button" value= "Add" onclick= "Watch_add (this.form);"/>
<input type= "button" value= "Modify" onclick= "Watch_mod (this.form);"/>
<input type= "button" value= "delete" onclick= "Watch_del (this.form);"/>
<input type= "button" value= "Save" onclick= "Watch_set (this.form);"/>
</form>
Create an array method with a string:
<script language= "JavaScript" >
</body>
functionspli () {datastr= "2,2,3,5,6,6"; varstr=NewArray (); Str=datastr.split (","); for (I=0;i<str.length; i++) {document.write (str[i]+ "<br/>"); }} spli (); </script>--From the Internet http://apps.hi.baidu.com/share/detail/31091794
Two
<select id= "Ddlresourcetype" onchange= "GetValue (This)" >
</select>
To dynamically delete all options in select:
document.getElementById ("Ddlresourcetype"). options.length=0;
To dynamically delete an item in Select option:
document.getElementById ("Ddlresourcetype"). Options.remove (indx);
To dynamically add an item in a SELECT option:
document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value));
Above in IE and Firefox can test success, hope you can use later.
In fact, the use of standard DOM operation is also possible, that is, Document.createelement,appendchild,removechild and the like.
Value aspect
function GetValue (obj)
{
var m=obj.options[obj.selectedindex].value
Alert (m);//Get value
var n=obj.options[obj.selectedindex].text
alert (n);//Get text
}
==============================================================================
1 Check if checked
if (Objselect.selectedindex >-1) {
Description Check
} else {
Description not selected
}
2 Delete a selected item
Objselect.options[objselect.selectedindex] = null;
3 Add-ons
Objselect.options[objselect.length] = new Option ("Hello", "Hello");
4 Modifying the items in the selection
Objselect.options[objselect.selectedindex] = new Option ("Hello", "Hello");
5 getting the text of the selected item
Objselect.options[objselect.selectedindex].text;
6 Get the value of the selected item
Objselect.options[objselect.selectedindex].value;
======================================================================
<% @LANGUAGE = "VBSCRIPT" codepage= "936"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>js add options to select dynamically [IE and Firefox compatible]</title>
<script language= "javascript" type= "Text/javascript" >
function Xlbchange (s) {
Switch (s) {
Case "1":
document.getElementById ("lb"). options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["Spiritual refinement", "Style design", "goal setting", "concept promotion";
for (Var i=0;i<soojs_value.length;i++) {
var ooption = document.createelement ("OPTION");
Ooption.value=soojs_value[i];
Ooption.text=soojs_text[i];
Zpmange.lb.options.add (ooption);
}
Break
Case "2":
document.getElementById ("lb"). options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["emblem", "motto", "Anthem", "School name Font", "School history Showroom", "Publicity book", "Propaganda CD", "Office supplies souvenir"];
for (Var i=0;i<soojs_value.length;i++) {
var ooption = document.createelement ("OPTION");
Ooption.value=soojs_value[i];
Ooption.text=soojs_text[i];
Zpmange.lb.options.add (ooption);
}
Break
Case "3":
document.getElementById ("lb"). options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["Campus Landscape Design", "Campus sculpture Design", "Campus relief Design", "Corridor culture Design";
for (Var i=0;i<soojs_value.length;i++) {
var ooption = document.createelement ("OPTION");
Ooption.value=soojs_value[i];
Ooption.text=soojs_text[i];
Zpmange.lb.options.add (ooption);
}
Break
Case "4":
document.getElementById ("lb"). options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["school System", "cultural activity", "Code of Conduct";
for (Var i=0;i<soojs_value.length;i++) {
var ooption = document.createelement ("OPTION");
Ooption.value=soojs_value[i];
Ooption.text=soojs_text[i];
Zpmange.lb.options.add (ooption);
}
Break
Default:
document.getElementById ("lb"). options.length=0;
var ooption = document.createelement ("OPTION");
ooption.value=0;
ooption.text= "Please select the category of work";
Zpmange.lb.options.add (ooption);
}
}
</script>
<body>
<form action= "zpmange.asp" name= "Zpmange" method= "POST" >
<p><select id= "Ddlresourcetype" onchange= "GetValue (This)" ><br/>
</select></p>
<p> dynamically Delete all options in select: <br/>
document.getElementById ("Ddlresourcetype"). options.length=0; <br/>
<br/>
To dynamically delete an item in Select option: <br/>
document.getElementById ("Ddlresourcetype"). Options.remove (indx); </p>
<p> dynamically add items in Select option: <br/>
document.getElementById ("Ddlresourcetype"). Options.add (New Option (Text,value)); </p>
<p> above in IE and Firefox can test success, hope you can use later. <br/>
In fact, the use of standard DOM operation is also possible, that is, Document.createelement,appendchild,removechild and the like. </p>
<p> value <br/>
function GetValue (obj) <br/>
{<br/>
var m=obj.options[obj.selectedindex].value<br/>
Alert (m);//Get value<br/>
var n=obj.options[obj.selectedindex].text<br/>
alert (n);//Get Text <br/>
}<br/>
</p>
<p> Example:</p>
<table width= "80%" border= "0" align= "center" cellpadding= "1" cellspacing= "1" style= "border-style:double" >
<tr>
<TD width= "50%" height= "><div align=" center >
<select name= "XT" Id= "XT" Onchange= "Xlbchange (this.value)" >
<option selected= "Selected" > Please select the work system </option>
<option value= "1" > Vision system </option>
<option value= "2" > Vision recognition System </option>
<option value= "3" > Environmental Vision System </option>
<option value= "4" > Behavioral Vision System </option>
</select>
</div></td>
<TD width= "61%" ><div align= "center" >
<select name= "lb" id= "lb" >
<option selected= "Selected" > Please select the work category </option>
</select>
</div></td>
</tr>
<tr>
<TD height= "203" colspan= "2" > </td>
</tr>
</table>
</form>
</body>
JS dynamic add option and delete option