The select label in HTML, also the Asp:dropdownlist control in asp.net.
How JavaScript operates on them
first, the basic understanding
Copy Code code as follows:
var e = document.getElementById ("Selectid");
E. options= new Option ("text", "value");
Create an option object that creates one or more <option value= "value" > text in the <select> tag </option>
Options are arrays that can hold multiple <option value= "value" > text </option> such labels
1:options[] Array of properties:
Length Property---------Long Property
The SelectedIndex property--------The index value of the text in the currently selected box, which is automatically allocated by memory (0,1,2,3 ...). Corresponds to (first text value, second text value, third text value, fourth text value ...).
2: The properties of a single option (---obj.options[obj.selecedindex] is a specified <option> tag, is a---)
The Text property---------return/specify literal
The Value property------Returns/Specifies a value that is consistent with the <options value= "..." >.
The Index property-------returns the subscript,
The selected property-------Returns/Specifies whether the object is selected. You can change the selected item dynamically by specifying TRUE or FALSE
The Defaultselected Property-----Returns whether the object is selected by default. True/false.
The method of 3:option
Add a <option> label-----obj.options.add (New ("Text", "value");< >
Delete a <option> label-----obj.options.remove (obj.selectedindex) < delete >
Get a <option> label text-----obj.options[obj.selectedindex].text< >
Modify the value of a <option> label-----obj.options[obj.selectedindex]=new option ("New text", "New value") < change >
Delete all <option> tags-----obj.options.length = 0
Get the value of a <option> tag-----obj.options[obj.selectedindex].value
Attention:
A: The above is written as such a type of Method Obj.options.function () and does not write Obj.funciton, because in order to consider the compatibility under IE and FF, such as Obj.add () can only be effective in IE.
option in B:obj.option does not require uppercase, option in new option requires uppercase
second, the application
Copy Code code as follows:
<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
Obj.options.add (new option ("My Eat", "4"); Add an option
alert (obj.selectedindex);//Display serial number, option set yourself
Obj.options[obj.selectedindex].text = "My eat"; Change value
Obj.remove (obj.selectedindex); Delete feature
}
</script>
<body>
<select id= "Myselect" >
<option> My Bag </option>
<option> my laptop </option>
<option> my oil </option>
<option> My Burdens </option>
</select>
<input type= "button" name= "button" value= "View Result" onclick= "number ();" >
</body>
1. Create a Select dynamically
Copy Code code as follows:
function Createselect () {
var myselect = document.createelement ("select");
Myselect.id = "Myselect";
Document.body.appendChild (Myselect);
}
2. Add Options option
Copy Code code as follows:
function AddOption () {
To find an object based on its ID,
var Obj=document.getelementbyid (' Myselect ');
Add an option
Obj.add (New Option ("text", "value"); This only works in IE.
Obj.options.add (New Option ("text", "value")); This compatible with IE and Firefox
}
3. Delete all options option
Copy Code code as follows:
function RemoveAll () {
var Obj=document.getelementbyid (' Myselect ');
obj.options.length=0;
}
4. Delete an option
Copy Code code as follows:
function Removeone () {
var Obj=document.getelementbyid (' Myselect ');
Index, to delete the ordinal number of the option, take the number of the currently selected option
var Index=obj.selectedindex;
Obj.options.remove (index);
}
5. Get the value of options option
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index].value;
6. Get Options Option text
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index].text;
7. Modify Options option
Copy Code code as follows:
var Obj=document.getelementbyid (' Myselect ');
var Index=obj.selectedindex; Ordinal number, taking the number of the currently selected option
var val = obj.options[index]=new Option ("New text", "New value");
8. Delete Select
Copy Code code as follows:
function Removeselect () {
var myselect = document.getElementById ("Myselect");
MySelect.parentNode.removeChild (Myselect);
}
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//ZH-CN" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html" >
<script language=javascript>
function $ (ID)
{
return document.getElementById (ID)
}
Function Show ()
{
var selectobj=$ ("area")
var myoption=document.createelement ("option")
Myoption.setattribute ("Value", "10")
Myoption.appendchild (document.createTextNode ("Shanghai"))
var myoption1=document.createelement ("option")
Myoption1.setattribute ("value", "100")
Myoption1.appendchild (document.createTextNode ("Nanjing"))
Selectobj.appendchild (myoption)
Selectobj.appendchild (MyOption1)
}
function Choice ()
{
var index=$ ("area"). SelectedIndex;
var val=$ ("area"). Options[index].getattribute ("value")
if (val==10)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var sh=document.createelement ("select")
Sh.add (New Option ("Pudong District", "101"))
Sh.add (New Option ("Huangpu", "102"))
Sh.add (New Option ("Xuhui District", "103"))
Sh.add (New Option ("Putuo", "104"))
$ ("context"). AppendChild (SH)
}
if (val==100)
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
var nj=document.createelement ("select")
Nj.add (New Option ("Xuanwu District", "201"))
Nj.add (New Option ("Baixia District", "202"))
Nj.add (New Option ("Xiaguan District", "203"))
Nj.add (New Option ("Qixia District", "204"))
$ ("context"). AppendChild (NJ)
}
}
Function Calc ()
{
var x=$ ("context"). Childnodes.length-1;
Alert (x)
}
function Remove ()
{
var i=$ ("context"). Childnodes.length-1;
var remobj=$ ("context"). Childnodes[i];
Remobj.removenode (True)
}
</script>
<body><div id= "Context" >
<select id= ' area ' on
Change= "Choice ()" >
</select>
</div>
<input Type=button value= "display" onclick= "Show ()" >
<input Type=button value= "Compute node" onclick= "Calc ()" >
<input Type=button value= "Delete" onclick= "remove ()" >
</body>
Based on these things, I implemented a small function with Jqeury Ajax+json as follows:
JS Code: (only for select-related code)
Copy Code code as follows:
/**
* @description Component Linkage Drop-down list (implemented using jquery Ajax with JSON)
* @prarm The ID of the Selectid drop-down list
* @prarm method name to invoke
* @prarm Temp Store the software ID here
* @prarm URL to jump to the address
*/
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,//The background address you want to access
Data: "method=" + method+ "&temp=" +temp,//to be sent
Success:function (msg) {//msg for returned data, do data binding here
var data = msg.lists;
Coverjsontohtml (Selectid,data);
}
});
}
/**
* @description convert JSON data to HTML data format
* @prarm The ID of the Selectid drop-down list
* @prarm the JSON array returned by Nodearray
*
*/
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 a list of degraded artifacts
Getcpgjthgl (Selectid, ' thgjdm ');
}
/**
* @description Clear the value of the Drop-down list
* @prarm The ID of the Selectid drop-down list
* @prarm index begins to empty the subscript position
*/
function Isclearselect (selectid,index) {
var Length=document.getelementbyid (Selectid). Options.length;
while (Length!=index) {
The length is changing because it must be retrieved
Length=document.getelementbyid (Selectid). Options.length;
for (Var i=index;i<length;i++)
document.getElementById (Selectid). Options.remove (i);
LENGTH=LENGTH/2;
}
}
/**
* @description get a list of degraded artifacts
* @prarm SELECTID1 references the ID of the software drop-down list
* @prarm selectId2 degraded widget drop-down list ID
*/
function Getcpgjthgl (SELECTID1,SELECTID2) {
var Obj1=document.getelementbyid (SELECTID1);//referencing software Drop-down list
var Obj2=document.getelementbyid (SELECTID2);//Degenerate widget Drop-down list
var len=obj1.options.length;
When the reference software list length equals 1 o'clock return, do not do the operation
if (len==1) {
return false;
}
Clear the value of the Drop-down list, either way
Isclearselect (SelectId2, ' 1 ');
document.getElementById (SELECTID2). length=1;
for (var i=0;i<len; i++) {
var option= obj1.options[i];
The referencing software is selected not to join
if (I!=obj1.selectedindex) {
Clone option and add to select
Obj2.appendchild (Option.clonenode (true));
}
}
}
HTML code:
Copy Code code as follows:
<table width= "100%" border=0 align= "left" cellpadding=0
<tr>
<TD class= "search_item_18" > <span class= "edit_mustinput" >*</span> referencing software:</td>
<TD class= "Search_content_82" >
<input name= "YYRJMC" id= "YYRJMC" type= "text" class= "Search_input" tabindex= "3" size= ">"
<input name= "YYRJDM" id= "YYRJDM" type= "hidden" >
<input type= "button" class= "Search_button_select"
onclick= "Linkagetree" (' linkage ', ' yyrjtree ', ' YYRJMC ', ' yyrjdm ', ' linkagetree ', ' 1 '); "value=" Choice ... ">
</td>
</tr>
<tr>
<TD class= "Search_item" > <span class= "edit_mustinput" >*</span> Reference 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" > Degenerate component:</td>
<TD class= "search_content" id= "Thgj" >
<select name= "THGJDM" style= "width:160" id= "THGJDM" >
<option value= "-1" selected> no </option>
</select>
</td>
</tr>
</TABLE>
