A basic understanding:
var e = document.getElementById("selectId");
e. options= new Option("text","value");
//Create an option object, that is, create one or more <option value="value">text</option> in the <select> tag
//options is an array, which can store multiple tags such as <option value="value">text</option>
1: Properties 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 (the first text value, second text value, third text value, fourth text value...)
2: Attributes of a single option (---obj.options[obj.selecedIndex] is a specified <option> tag, which is a ---)
text attribute---------return/specify text
value attribute------Return/specify value, consistent with <options value="...">.
index attribute-------returns the subscript,
selected attribute ------- Returns/specifies whether the object is selected. By specifying true or false, the selected item can be changed dynamically
defaultSelected attribute-----Returns whether the object is selected by default. true/false.
3: option method
Add an <option> tag-----obj.options.add(new("text","value"));<add>
Delete an <option> tag-----obj.options.remove(obj.selectedIndex)<delete>
Get the text of an <option> tag-----obj.options[obj.selectedIndex].text<check>
Modify the value of an <option> tag-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Remove all <option> tags-----obj.options.length = 0
Get the value of an <option> tag-----obj.options[obj.selectedIndex].value
Notice:
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() is only 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.
Two applications
Copy the code 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 one
//obj.options.add(new Option("My food","4"));Add another option
//alert(obj.selectedIndex);//display serial number, option is set by itself
//obj.options[obj.selectedIndex].text = "My food"; change value
//obj.remove(obj.selectedIndex); delete function
}
</script>
</head>
<body>
<select id="mySelect">
<option>My bag</option>
<option>My notebook</option>
<option>My Oil</option>
<option>My burden</option>
</select>
<input type="button" name="button" value="View results" onclick="number();">
</body>
</html>
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 the code code as follows:
/**
* @description Component linkage drop-down list (implemented using JQUERY's AJAX and JSON)
* @prarm selectId ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp The software ID is stored here
* @prarm url The address to jump to
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//Use the get method to access the background
dataType: "json",//Return data in json format
url: url,//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 ID of the drop-down list
* @prarm nodeArray 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<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 the list of degraded components
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Clear the value of the drop-down list
* @prarm selectId ID of the drop-down list
* @prarm index The index position to start clearing
*/
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;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description Get the list of degraded components
* @prarm selectId1 refers to the ID of the software drop-down list
* @prarm selectId2 ID of the degenerate component drop-down list
*/
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;
//When the length of the referenced software list is equal to 1, it is returned and 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;i<len; i++){
var option= obj1.options[i];
//The selected items referenced by the software are not added
if(i!=obj1.selectedIndex){
//Clone OPTION and add to SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}
HTML code:
Copy the code code as follows:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>Quoting software:</td>
<td>
<input name="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</td>
</tr>
<tr>
<td> <span>*</span>Quotation version:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td>Degenerate components:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" selected>None</option>
</select>
</td>
</tr>
</TABLE>