A basic understanding:
var e = ("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 that can store multiple tags such as <option value="value">text</option>
1: Properties of options[ ] array:
length attribute-----------------------------------------------------------------------------------------------------------------------------
selectedIndex property---------------The index value of the text in the currently selected box. This index value is the (0, 1, 2, 3...) automatically allocated by memory (first text value, second text value, third text value, fourth text value.........)
2: Properties of a single option(--[] is a specified <option> tag, which is a ---)
text attribute ------------------------------------------------------------------------------------------------------------------------------
The value attribute------Returns/Specify value, consistent with <options value="...">.
index attribute------------Return to the index,
selected property ----------Return/Specify whether the object is selected. By specifying true or false, the selected item can be changed dynamically
defaultSelected property -----Returns whether the object is selected by default. true / false.
3: The method of option
Add a <option> tag-----(new("text","value")); <increase>
Delete a <option> tag-----()<delete>
Get a <option> tag text -----[].text<check>
Modify the value of a <option> tag -----[]=new Option("new text","new value")<change>
Delete all <option> tags ----- = 0
Get the value of a <option> tag ------[].value
Notice:
a: The above is written as a method () of this type but not because in order to consider compatibility under IE and FF, such as () can only be valid in IE.
b: The option in the new Option needs to be capitalized.
2 Application
<html>
<head>
<script language="javascript">
function number(){
var obj = ("mySelect");
//[] = new Option("My Eat","4");//Change in the value of the currently selected one
//(new Option("My Eat","4"));Add another option
//alert();//Show the serial number, set by option yourself
//[].text = "My Eat"; change the value
//();Delete function
}
</script>
</head>
<body>
<select >
<option>My bag</option>
<option>My notebook</option>
<option>My oil</option>
<option>My burden</option>
</select>
<input type="button" name="button" value="View result" onclick="number();">
</body>
</html>
Based on these things, I implemented a small function as follows using JQEURY AJAX+JSON:
JS code: (only taken from SELECT related code)
/**
* @description Component linkage drop-down list (implemented with JQUERY’s AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The method name to be called
* @prarm temp Store the software ID here
* @prarm url Address to jump
*/
function linkAgeJson(selectId,method,temp,url){
$({
type: "get",//Use the get method to access the background
dataType: "json",//Return data in json format
url: url,//The backend address to be accessed
data: "method=" + method"temp="+temp,//The data to be sent
success: function(msg){//msg is the returned data, and data binding is done here
var data = ;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data to HTML data format
* @prarm selectId The 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<;i++){
//create select Option
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//put Option to select
(tempOption);
}
// Get the list of degraded components
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The index position that starts to clear
*/
function isClearSelect(selectId,index){
var length=(selectId).;
while(length!=index){
//The length is changing because it must be re-acquisitioned
length=(selectId).;
for(var i=index;i<length;i++)
(selectId).(i);
length=length/2;
}
}
/**
* @description Get the list of degenerate components
* @prarm selectId1 The ID of the reference software drop-down list
* @prarm selectId2 ID of the degraded component drop-down list
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=(selectId1);//Cite the software drop-down list
var obj2=(selectId2);//Degraded component drop-down list
var len=;
//Return when the length of the reference software list is equal to 1, no operation is performed
if(len==1){
return false;
}
//Clear the value of the drop-down list, both ways are possible
// isClearSelect(selectId2,'1');
(selectId2).length=1;
for(var i=0;i<len; i++){
var option= [i];
//The selected item of the reference software will not be added
if(i!=){
//Clone OPTION and add it to SELECT
((true));
}
}
}
HTML code:
<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>Cite software:</td>
<td class="Search_content_82">
<input name="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="yyrjDm" type="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>Cited sub-version:</td>
<td class="Search_content" >
<select name="yyfbDm" style="width:160" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">Degraded component:</td>
<td class="Search_content" >
<select name="thgjDm" style="width:160" >
<option value="-1" selected>None</option>
</select>
</td>
</tr>
</TABLE>