This article is mainly for the Select option in JS Summary introduction, the need for friends can come to the reference, I hope to help you.
A basic understanding of: var e = document.getElementById ("Selectid"); E. options= new Option ("text", "value"); &N Bsp Create an Option object, that is, create one or more <option in the <select> tag value= "value" > Text </option> //options is a number of arrays, It can hold multiple <option value= "value" > Text </option> such tags 1:options[] Array properties: The Length property---------the SelectedIndex attribute--------The index value of the text in the currently selected box, which is automatically allocated by memory (0,1,2,3 ...). Corresponds to (first text value, second text value, third text value, fourth text value ...). 2: The properties of a single option (---obj.options[obj.selecedindex] is a specified <option> tag, is a---) The Text property---------Returns/Specifies the text Value property------Returns/Specifies a value that is consistent with the <options value= "..." >. Index Property-------returns the subscript, Selected property-------Returns/Specifies whether the object is selected. By specifying TRUE or FALSE, you can dynamically change the selection The defaultselected Property-----Returns whether the object is selected by default. True/false. 3:option method Add a <option> label-----obj.options.add (New ("Text", "value");< add > Delete a <option> tag-----obj.options.remOve (obj.selectedindex) < delete > get a <option> label text-----obj.options[obj.selectedindex].text< Check > Modify the value of a <option> tag-----obj.options[obj.selectedindex]=new option ("New text", "New value") < change > Delete all <option> tags-----obj.options.length = 0 Get a value for the <option> label-----obj.options[ obj.selectedindex].value Note: A: The above is written like this type of method Obj.options.function () without writing Obj.funciton, is because in order to consider compatibility under IE and FF, such as Obj.add () only in IE effective . b:obj.option option does not need to capitalize, option in new option requires capital Two Application code as follows: <html> <head> <script language= "javascript" > function Number () { var obj = document.getElementById ("Myselect"); //obj.options[obj.selectedindex] = New option ("My Eat", "4")//change in the value of the currently selected //obj.options.add (new option ("My Eat", "4"); Add an option //alert (Obj.selectedindex)//Display serial number, option set the //obj.Options[obj.selectedindex].text = "My eat"; Change value //obj.remove (obj.selectedindex); Delete feature } </script> </head> <body> <select id= "Myselect" > <option> My package </option> <option> my laptop </option> <option> my oil </option> <option> my burden </option> </ select> <input type= "button" name= "button" value= "View Result" onclick= "number ();" > </body> </html> According to these things, own with Jqeury Ajax+json implemented a small function as follows: JS code: ( Only for select-related code) code as follows:/** * @description Component linkage Drop-down list (implemented with jquery Ajax with JSON) & nbsp * @prarm selectid drop-down list id * @prarm method The method name to invoke * @prarm temp store software id * @prarm url address to jump &NBSP;*/&NBsp function linkagejson (selectid,method,temp,url) { $j. Ajax ({ & nbsp type: "Get",//Use Get method Access backend DataType: "JS On ",//Return JSON format data url:url,//to access background address &N Bsp Data: "method=" + method+ "&temp=" +temp,//to be sent & nbsp Success:function (msg) {//msg for returned data, here do data binding VAR data = msg.lists; coverjsontohtml (selectid,data); } &N Bsp }); } /** * @description CONVERT JSON data to HTML data format * @prarm selectid drop-down list id * @prarm nodearraY returns the JSON array * */ function coverjsontohtml (selectid,nodearray) { //get select var tempselect= $j ("#" +selectid); //clear Select value isclearselect (Selectid, ' 0 '); var tempoption=null; for (var i=0;i<nodearray.length;i++) { //create Select option tempoption= $j (' <option value= "' +nodearray[i].dm+ '" > ' +nodearray[i].mc+ ' </option> '); //put option To select Tempselect.append (tempoption); } //Get Degenerate widget list &NBSP;GETCPGJTHGL (Selectid, ' THGJDM '); } /** * @description Emptying the value of the Drop-down list * @prarm selectid drop-down list id * @prarm Index start empty subscript position */ function isclearselect (selectid,index) { var Length=document.getelementbyid (selectid). options.length; while (Length!=index) { /length is changing, as must be re-acquired &N Bsp Length=document.getelementbyid (Selectid) .options.length; for (Var i=index;i <length;i++) document.getelementbyid (Selectid). Options.remove (i); length=length/2; } & nbsp;} /** * @description get degraded widget list * @prarm selectid1 reference software drop-down list id * @prarm selectid2 Degenerate widget Drop-down list id */ function getcpgjthgl (SELECTID1,SELECTID2) { var obj1= document.getElementById (SELECTID1)//reference software Drop-down list var Obj2=document.getelementbyid (SELECTID2); Degraded widget drop-down list var len=obj1.options.length; //When the reference software list length equals 1 o'clock return, do not do operation &NBSP;IF ( len==1) { return false; &NBsp } //Clears the value of the Drop-down list, both of which can be //Isclearselect (SELECTID2, ' 1 '); document.getElementById (SELECTID2) .length=1; for ( var i=0;i<len; i++) { var option= obj1.options[i] //referencing software is selected without adding if (i!=obj1.selectedindex) { // Clone option and add to select Obj2.appendchild (Option.clonenode (True)); } } } HTML code: code as follows: <table width= "100%" border=0 align= "left" cellpadding=0 Bsp <tr> <td class= "search_item_18" > <span class= "edit_mustinput" >*</span > Referencing software:</td> <td class= "search_content_82" > <input name= "YYRJMC" id= "YyrjMc" type = "text" class= "Search_input" tabindex= "3" size= "> <input" name= "YYRJDM" id= "YYRJDM" type= "hidden" > <input type= "button" class= "Search_button_select" Onclick= "Linkagetree" (' linkage ', ' yyrjtree ', ' YYRJMC ', ' yyrjdm ', ' linkagetree ', ' 1 '); "value=" Choice ... "> </td > </tr> <tr> <td class= "Search_item" > <span class= "edit_ Mustinput ">*</span> reference:</td> <td class=" search_content "id=" YYFB "> <select name= "YYFBDM" style= width:160 "id=" YYFBDM "onchange=" Getcpgjthgl (' yyfbdm ', ' thgjdm ') "> </select> </td> </tr> <tr> <td class= "Search_ Item "> Degenerate widget:</td> <td class=" search_content "id=" Thgj "> <select Name = "THGJDM" style= "width:160" id= "THGJDM" > <option value= "-1" selected> no </option> </select> </td> </tr> </TABLE> 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
