js select option object summary_javascript skills

Basic understanding:

var e = document.getElementById("selectId");

e. options= new Option("text","value");

//Create an option object, that is, create one or more text

in the tag

//options is an array, which can store multiple tags like

text

1:Attributes of options[ ] array:

length attribute---------Length attribute

selectedIndex attribute--------The index value of the text in the currently selected box. This index value is automatically allocated by the memory (0,1,2,3...) corresponding to (No. One text value, second text value, third text value, fourth text value.....)

2: Attributes of a single option (---obj.options[obj.selecedIndex] is a specified

tag, which is a ---)

text attribute---------return/specify text

value attribute------returns/specifies the value, consistent with .

index attribute-------returns the subscript,

selected attribute ------- Returns/specifies whether the object is selected. By specifying true or false, the selected item can be dynamically changed

defaultSelected attribute-----returns whether the object is selected by default. true/false.

3: option method

Add an

tag-----obj.options.add(new("text","value"));

Delete an

tag-----obj.options.remove(obj.selectedIndex)

Get the text of an

tag-----obj.options[obj.selectedIndex].text

Modify the value of an

tag-----obj.options[obj.selectedIndex]=new Option("New Text","New Value")

Remove all

tags-----obj.options.length = 0

Get the value of an

tag-----obj.options[obj.selectedIndex].value

Note:

a: The above method is written like this type of method obj.options.function() instead of obj.funciton, because in order to consider the compatibility under IE and FF, such as obj.add() can only be used in 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

Second application

Copy code The code is as follows:

My bag
My Book
  My oil
  My burden

< input type="button" name="button" value="View results" onclick="number();">

Based on these things, I implemented a small function using JQEURY AJAX JSON as follows:

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

Copy code The code is as follows:

/**
* @description Component linkage drop-down list (implemented using JQUERY's AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp this Store the software ID
* @prarm url The address to jump to
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//Use The get method accesses the backend
dataType: "json",//returns data in json format
url: url,//the backend address to be accessed
data: "method=" method "&temp=" temp, //Data to be sent
Success: function(msg){//msg is the returned data, data binding is done here
var data = msg.lists;
coverJsonToHtml(selectId,data);
                                                                                                                                                 
/**
* @description Convert JSON data into HTML data format * @prarm selectId The ID of the drop-down list

* @prarm nodeArray The returned 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//create select Option
tempOption= $j('' nodeArray[i].mc ' ');
//put Option to select
tempSelect.append(tempOption);
}
                                                                                                                   
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//The length is changing, Because it must be reacquired
         length=document.getElementById(selectId).options.length; i);
length=length/2;
}
}

/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The subscript position to start clearing
*/
function getCpgjThgl(selectId1,selectId2){
var obj1 =document.getElementById(selectId1);//Reference software drop-down list
var obj2=document.getElementById(selectId2);//Degenerate component drop-down list
var len=obj1.options.length;
// Return when the length of the referenced software list is equal to 1, no operation is performed
if(len==1){
          return false;
  }
  //Clear the value of the drop-down list, both methods are available
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;ivar option = obj1.options[i];
//The selected items of the referenced software are not added
if(i!=obj1.selectedIndex){
//Clone OPTION and add it to SELECT
obj2. appendChild(option.cloneNode(true));
}
}

}


HTML code:




Copy code

The code is as follows:

 
  *引用软件：



onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">

 
 


 

 

 
 


  
无
  

 

*引用分版：

退化构件：