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: <br>function number(){ <br>var obj = document.getElementById("mySelect" ); <br> //obj.options[obj.selectedIndex] = new Option("My Eat","4");//Change the value of the currently selected one <br> //obj.options .add(new Option("My Eat","4"));Add another option <br> //alert(obj.selectedIndex);//Display the serial number, the option sets it by itself <br> //obj .options[obj.selectedIndex].text = "My Chichi";Change value<br> //obj.remove(obj.selectedIndex);Delete function<br>} <br> 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="选择..."> *引用分版： 退化构件： 无
