JS Select option Object Summary

Source: Internet
Author: User
Tags json

  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 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          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      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> 
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.