This article is mainly on the JS operation Select and option examples are introduced, the need for friends can come to the reference, I hope to help you.
1. Dynamically create select code as follows: function Createselect () { var myselect = document.createelement_x ("se Lect "); myselect.id = "Myselect"; Document.body.append Child (Myselect); } 2. Add options option code is as follows: function addoption () { &NB Sp //Search object based on ID, var obj=document.getelementbyidx_x (' Myselect '); //add an option obj.add (new option ("Text", "value")); //This can only be effective in IE obj.options.add (New Option ("text", "value"); This compatible IE with Firefox &NBSP;} 3. Delete all options option code as follows: function RemoveAll () { var obj=document.getelementbyidx_x (' Myselect '); obj.options.length=0; 4. Delete an option The following code is as follows: FunctiOn Removeone () { var obj=document.getelementbyidx_x (' Myselect '); &N Bsp //index, to remove the ordinal number of the option, here take the current selected option of the serial number VAR Index=obj.selectedindex; Obj.options.remove (index); &NBSP 5. Get options option value var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the ordinal number of the currently selected option var val = obj.options[index].value; 6. Get options Option text var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the ordinal number of the currently selected option var val = obj.options[index].text; 7. Modify Options option var obj=document.getelementbyidx_x (' Myselect '); var Index=obj.selectedindex; Ordinal number, taking the ordinal number of the currently selected option var val = obj.options[index]=new option ("New text", "New value"); 8. Delete Select Code as follows: function Removeselect () {var myselect = document.getelementbyidx_x ("Myselect"); MySelect.parentNode.removeChild (Myselect); &NBSP} complete code for the entire instance is as follows: The code is as follows: <! DOCTYPE HTML Public "-//w3c//DTD HTML 4.01//zh-cn "Http://www.w3.org/TR/html4/strict.dtd" > <html> <head> <meta http-equiv= "Content-type" content= "text/html" > <head> <script language=javascript> function $ (ID) { return document.getelementbyidx_x (ID) } &NB Sp function Show () { var selectobj=$ ("area") var Myoption=docume nt.createelement_x ("option") myoption.setattribute ("value", "ten") Myoption.appendchild (document.createTextNode ("Shanghai")) var myoption1=document.createelement_x (" Option ") myoption1.setattribute (" value "," M ") 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_x ("select") Sh.add (new option ("Pudong District", "a")) Sh.add (new option ("Huangpu", "102")) s H.add (New option ("Xuhui", "")) Sh.add (new option ("Putuo", ")" $ ("context"). AppendChild (SH) if (val==100) { var i=$ ( "Context"). Childnodes.length-1; var remobj=$ ("context"). Childnodes[i]; remobj.removenode (true) var nj=document.createelement_x ("select") NJ. Add (new option ("Xuanwu District", "201") Nj.add (new option ("Baixia District", "") nj.add (new option ("Xiaguan District", "203")) Nj.add (New Option ("Qixia District", "204") $ ("context"). AppendChild (NJ) &NBS P;} } 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= "display" onclick= "Show ()" > <input type=button value= "Compute node" onclick= "Calc ()" > <input Type=button value= "Delete" onclick= "remove ()" > </body> </html> Improved version: Add, modify, delete option element code in select: Function Watch_ini () {//initial for (Var i=0; i<arguments.length; I + +) {var word = document.createelement_x ("option"); word.text = Arguments[i]; Watch.keywords.add (word);//watch. is form Name} function Watch_add (f) {//add var word = document.createelement_x ("option"); word.text = F.word.value; f.keywords. Add (Word); } But the Add () method is only valid under IE, for the compatibility of FF and opera, the code is modified as follows: The code is as follows: function Watch_ini () {//initial F or (var i=0 i<arguments.length; i++) { var ooption=new Option (arguments[i],arguments[i); Document.getelementbyidx_x ("Myselect") [I]=ooption; } function Watch_add (f) {//Add 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: The 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" con tent= "JavaScript Select options text value add modify delete Set" > <script language= "javascript" > <!--functio n Watch_ini () {//initial for (Var i=0 i<arguments.length; i++) { var ooption=new Option (arguments[i],arguments [i]); document.getelementbyidx_x ("Myselect") [I]=ooption; } function Watch_add (f) {//Add 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> </head> <body> <form name= "Watch" method= "post" action= "" > <select id= "myselect" name= "keywords" Size= "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/> The <input "button" type= "Add" O nclick= "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: The code is as follows: <script language=" JavaScript "> & nbsp </body> </html> <script> function spli () {datastr= "2,2,3,5,6,6"; var str= new Array (); str=datastr.split (","); for (i=0;i<str.length i++) {document.write (str[i]+ "<br/>"); } spli (); </script> Debugging a section of JS today, running well on IE, debugging on the Firefox error, check the data found in the Obj.add ("text", "value"); //This can only be effective in IE obj.options.add (New Option ("text", "value"); This compatible IE and Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
