Js select option object summary

  • 2020-03-30 01:00:20
  • OfStack

Basic understanding:

Var e = document. GetElementById (" selectId ");

E. Options = new Option(" text "," value ");

// creates an option object in < Select> Create one or more tags < The option value = "value" > Text < / option>

//options is an array that can hold multiple < The option value = "value" > Text < / option> Labels like this

1: properties of the options[] array:

Length property -- length property

SelectedIndex property -- the index value of the text in the currently selected box. The index value is automatically allocated by memory (0,1,2,3...). Correspondence (first text value, second text value, third text value, fourth text value...)

2: properties of a single option (-- obj.options[obj.selecedIndex] is some < specified; Option> Tag, is a --)

Text property -- returns/specifies the text

Value attribute -- returns/specifies the value, compared with < The options value = "..." > Consistent.

Index property -- returns the index,

The selected attribute returns/specifies whether the selected object is selected. You can dynamically change the selected item by specifying true or false

The defaultSelected property returns whether the object is selected by default. True/false.

3: the method of option

Add a < Option> TAB --obj.options. Add (new(" text "," value ")); < Add >

Remove one < Option> Tag -- -- -- -- -- obj. Options. Remove (obj. SelectedIndex) < Delete >

Get an < Option> TAB text --obj.options[obj.selectedIndex]. Text< Check >

Modify one < Option> TAB value --obj.options[obj.selectedIndex]=new Option(" new text "," new value ")< Change >

Delete all < Option> TAB --obj.options.length = 0

Get an < Option> Tag value --obj.options[obj.selectedIndex].value


A: the above method is obj.options. Function () instead of obj.funciton, because in order to consider the compatibility between IE and FF, obj.add() can only be valid in IE.

B: the option in obj. Option does not need to be capitalized, and the option in new option needs to be capitalized

The second application

<script language="javascript"> 
function number(){ 
var obj = document.getElementById("mySelect"); 
    //obj.options[obj.selectedIndex] = new Option(" My taste ","4");// Changes in the value of the currently selected one  
    //Obj. options. Add (new Option(" my eat ","4")); Add another option
    //alert(obj.selectedIndex);// Show the serial number, option self-set  
    //Obj. options[obj.selectedIndex]. Text = "my eat "; Change the value
   //Obj. Remove (obj. SelectedIndex); Delete function
<select id="mySelect"> 
     <option> My bag </option> 
     <option> My laptop </option> 
     <option> My oil </option> 
     <option> My burden </option> 
<input type="button" name="button" value=" View the results " onclick="number();"> 

According to these things, I use JQEURY AJAX+JSON to achieve a small function as follows:

JS code :(only the code related to the SELECT is retrieved)

function  linkAgeJson(selectId,method,temp,url){    
            type: "get",//Use the get method to access the background
            dataType: "json",//Returns data in json format
            url: url,//The background address to be accessed
            data: "method=" + method+"&temp="+temp,//The data to send & NBSP;              
            success: function(msg){//MSG does the data binding here for the returned data
                var data = msg.lists; 
function coverJsonToHtml(selectId,nodeArray){ 
//get select 
   var tempSelect=$j("#"+selectId); 
   //clear select value 
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 
        //Gets a list of degenerate artifacts
  function isClearSelect(selectId,index){ 
     var length=document.getElementById(selectId).options.length; 
      //The length is variable because it must be recaptured & cake;
          for(var i=index;i<length;i++) 

   function getCpgjThgl(selectId1,selectId2){ 
   var obj1=document.getElementById(selectId1);//Reference software drop-down list
   var obj2=document.getElementById(selectId2);//A drop-down list of degenerate artifacts
   var len=obj1.options.length; 
  //Returns when the length of the list of referenced software is equal to 1, no action is taken
          return false; 
   //Empty the drop-down list of values, either way
  // isClearSelect(selectId2,'1');  
   for(var i=0;i<len; i++){ 
var option= obj1.options[i];  
//The selected item of reference software is not added
//Clones OPTION and adds it to SELECT & NBSP;  

HTML code:

<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1> 
<td  class="Search_item_18">  <span class="Edit_mustinput">*</span> Reference software: </td> 
<td  class="Search_content_82"> 
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3"  size="30" > 
<input name="yyrjDm" id="yyrjDm" type="hidden" > 
<input type="button" class="Search_button_select" 
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value=" choose ..."> 
<td class="Search_item"> <span class="Edit_mustinput">*</span> Quoted sub-edition: </td> 
<td  class="Search_content" id="yyfb"> 
  <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> 
<td class="Search_item"> Degraded components: </td> 
<td  class="Search_content" id="thgj"> 
   <select name="thgjDm" style="width:160" id="thgjDm"> 
<option value="-1" selected> There is no </option> 

Related articles: