select JavaScript DOM form elements of

• html tags

Select the drop-down box select the label is

        <select id="city" multiple="multiple"  onchange="dochange()"  name="city"  style=" width:300px; ">
              <option value="1">上海</option>
              <option value="2">北京</option>
              <option value="3">广州</optgroup>
        </select>

Common special attributes: multiple = "multiple": Set drop-down box to multiple selection drop-down box

• Dom implemented

 It is achieved by the HTMLSelectElement

Unique properties and methods; 

1.    ; add (newOption, relOption) inserted before new option, in which the position of the specified relOption
2.    multiple: boolen value, whether the number of options provided, equivalent to multiple attribute in HTML
3.    options: HTMLCollection all <option> element in the controls ; IE8 and return the results of the following versions of not only the set of options, taking into account the compatibility is not recommended 
4.    remove (index); Removes the specified location options:
5.     selectedIndex: 0 based index of the selected item is not selected as -1;
6.    size: Select the number of lines visible in the box.
7.    value: the value of the selected item: item not selected: value is an empty string; only one item selected characteristic value if the specified value is equal to the value of the value attribute of the selected item. If the characteristic value is not specified, the value is equal to the value of the text {IE} returns an empty string at  a plurality of selected: take the first value of the selected item. (Not recommended, compatibility is not good)

  DOM methods commonly used summary

Clear Options: select.options.length = 0;

Add options select.options.add (new option (text, value));

Delete option: select.options.removeChild (optionItem); or select.options.remove (optionindex);

Disable the drop-down box: select.setAttribute ( "disabled", "disabled");

The drop-down box: select.removeAttribute ( "disabled");

Setting options: select.options [1] .selected = "selected"; // option if there are multiple options, does not clear before

                  select.selectIndex = 1; // If the options before multiple options, it is cleared.

 

   Package as follows:

var selectUtil = ( function () { 
        
        dynamic loading option 
      function     initDate (E, SEL) 
          { 
              
             // Clear selet option 
              sel.options.length = 0;   // Dom clear option 
              for ( var OP in Options) 
              { 
                  the console.log (Options [OP] .value_str); 
                  var OP = new new Option-(Options [OP] .text_str, Options [OP] .value_str); 
                  sel.options.add (OP); 
              } 
          } 
      
            // set the selected value - not the selected property using uncheck the previous value will 
         function setSelectValue (value) {
             var Options = document.getElementById ( "City" ) .children;
              for ( var Item in Options) 
             { 
                 IF (Options [Item] .Value == value) 
                 { 
                     Options [Item] .selected = "Selected" ;
                      BREAK ; 
                 } 
             } 
         } 
         
         // set the selected value before use --- selectedindex property item deselects 
         function setSelectIndex (VALUE1) {
            var City = document.getElementById ( "City" );
              for ( varItem in city.children) 
             { 
                 IF (city.children [Item] == .Value VALUE1) 
                 { 
                     city.selectedIndex = Item;
                      BREAK ; 
                 } 
             } 
         } 
         // Returns the selected value acquisition cycle, do not use this cycle options: because the low version attribute contains not only the drop-down menu options 
         function the getSelected () {
            var City = document.getElementById ( "City" );
            var selItem = new new the Array ();
              for ( var Item in city.children) 
             {
                 if(city.children[item].selected)
                 {
                     selItem.push(city.children[item].value);
                 }
             }
             return selItem;
         }
         
         function doDel(value1)
         {
             var city=document.getElementById("city");
             
             for(var item in city.children)
             {
                 if(city.children[item].value==value1)
                 {
                 // city.removeChild(city.children[item]);   或者
                   city.remove(item);
                     BREAK 
{; 
                 } 
             } 
         } 
          Return { 
              initDate: initDate,   // dynamic loading SELECT 
              setSelectValue: setSelectValue, // Set the selected value of the selected property options   
              setSelectIndex: setSelectIndex,    // set the drop-down selection box is checked, the value selectIndex embodiment 
              getSelectValue: the getSelected,    // Get selected item 
              Dodel: Dodel 
          } 
     }) (); 


// disable and enable the select box 
var City = document.getElementById ( "City" );
 IF (city.hasAttribute ( "disabled" )) 
city.removeAttribute ("disabled");
this.value="禁用下拉框";
}else{
city.setAttribute("disabled","disabled");
this.value="启用下拉框";
}
}

• Jquery operation

       // Clear option 
        $ ( "# City" ) .empty ();
          // dynamically loaded 
        $ .each (Options, function (i, Item) {
             // $ ( "# City") the append (new new the Option (Item.. text_str, item.value_str)); // both methods can be 
            $ ( "# city") append ( "<option value = '" + item.value_str + "'>" + item.text_str + "</ option>. " ); 
        }) 
        
        // set the option 
        $ (" # doSelect ") the Click (. function () { 
            $ ( Val ()) #city") Val ($ (. "# select_value" ");.   // will empty originally selected item 
            $ ( "# city option [value = '" + $ ( "# select_Value").val()+"']").prop("selected",true); //The selected item does not clear the original jqeury is set to true 
        }) 
        
        // get the selected value 
        $ ( "# getselect"). The Click ( function () {
             // return an array of options collection 
            $ ( "# text_select"). Val ($ ( "# City" ) .val ()); 
        }) 
        
        $ ( . "#doDisabled") the Click ( function () {
             IF (. $ ( "# City") attr ( "Disabled" )) 
            { 
                $ ( "#city") removeAttr ( "Disabled." );     
            } the else { 
                
            $ ( . "#city") attr ( "Disabled", "Disabled" );
            
            }
        })
        
        
        })

•   event

change: When the option value changes trigger