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
Note:
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
<html>
<head>
<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
}
</script>
</head>
<body>
<select id="mySelect">
<option> My bag </option>
<option> My laptop </option>
<option> My oil </option>
<option> My burden </option>
</select>
<input type="button" name="button" value=" View the results " onclick="number();">
</body>
</html>
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){
$j.ajax({
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;
coverJsonToHtml(selectId,data);
}
});
}
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);
}
//Gets a list of degenerate artifacts
getCpgjThgl(selectId,'thgjDm');
}
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//The length is variable because it must be recaptured & cake;
length=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
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
if(len==1){
return false;
}
//Empty the drop-down list of values, either way
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option= obj1.options[i];
//The selected item of reference software is not added
if(i!=obj1.selectedIndex){
//Clones OPTION and adds it to SELECT & NBSP;
obj2.appendChild(option.cloneNode(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> 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>
</tr>
<tr>
<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')">
</select>
</td>
</tr>
<tr>
<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>
</select>
</td>
</tr>
</TABLE>