I. 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> label.
// Options is an array that contains multiple <option value = "value"> text </option> labels.
1: options [] attributes of the array:
Length attribute --------- Length attribute
Selectedindex attribute -------- text index value in the currently selected box, which is automatically allocated by memory (, 2, 3 .....) (The first text value, the second text value, the third text value, and the fourth text value ..........)
2: attributes of a single option (--- obj. Options [obj. selecedindex] is a specified <option> tag, which is ---)
Text attribute --------- return/specify text
Value Attribute ------ return/specify a value, consistent with <options value = "...">.
Index attribute ------- returns the subscript,
Selected attribute ------- return/specify whether the object is selected. You can dynamically change the selected item by specifying true or false.
Defaultselected attribute ----- returns whether the object is selected by default. True/false.
3: Option Method
Add a <option> label ----- obj. Options. Add (New ("text", "value"); <add>
Delete A <option> label ----- obj. Options. Remove (obj. selectedindex) <Delete>
Obtain the <option> label text ----- obj. Options [obj. selectedindex]. Text <query>
Modify the value of a <option> label ----- obj. Options [obj. selectedindex] = New Option ("new text", "New Value") <change>
Delete all <option> labels ----- obj. Options. Length = 0
Obtain the value of a <option> label ----- obj. Options [obj. selectedindex]. Value
Note:
A: The above is written as OBJ of this type. options. function () without writing obj. funciton is used to consider compatibility with IE and FF, such as obj. add () is only valid in IE.
B: Options in OBJ. Option do not need to be capitalized, and options in new option must be capitalized.
II. Application
<HTML>
<Head>
<Script language = "JavaScript">
Function number (){
VaR OBJ = Document. getelementbyid ("myselect ");
// Obj. Options [obj. selectedindex] = New Option ("My items", "4"); // change the value in the currently selected one
// Obj. Options. Add (New Option ("my meals", "4"); then add an option
// Alert (obj. selectedindex); // displays the sequence number.
// Obj. Options [obj. selectedindex]. Text = "My favorites"; change the value
// Obj. Remove (obj. selectedindex); Delete
}
</SCRIPT>
</Head>
<Body>
<Select id = "myselect">
<Option> my bags </option>
<Option> my current </option>
<Option> my oil </option>
<Option> my responsibilities </option>
</SELECT>
<Input type = "button" name = "button" value = "view result" onclick = "number ();">
</Body>
</Html>
1. dynamically create select
Function createselect (){
VaR myselect = Document. createelement ("select ");
Myselect. ID = "myselect ";
Document. Body. appendchild (myselect );
}
2. Add Option
Function addoption (){
// Search for objects by ID,
VaR OBJ = Document. getelementbyid ('myselect ');
// Add an option
OBJ. Add (New Option ("text", "value"); // This can only be valid in IE
OBJ. Options. Add (New Option ("text", "value"); // compatible with IE and Firefox
}
3. Delete All option options
Function removeall (){
VaR OBJ = Document. getelementbyid ('myselect ');
OBJ. Options. Length = 0;
}
4. delete an option Option
Function removeone (){
VaR OBJ = Document. getelementbyid ('myselect ');
// Index. The sequence number of the option to be deleted. The sequence number of the selected option is used here.
VaR Index = obj. selectedindex;
OBJ. Options. Remove (INDEX );
}
5. Obtain the option value.
VaR OBJ = Document. getelementbyid ('myselect ');
VaR Index = obj. selectedindex; // the serial number of the selected option.
Var val = obj. Options [Index]. value;
6. Obtain the option text
VaR OBJ = Document. getelementbyid ('myselect ');
VaR Index = obj. selectedindex; // the serial number of the selected option.
Var val = obj. Options [Index]. text;
7. Modify Option
VaR OBJ = Document. getelementbyid ('myselect ');
VaR Index = obj. selectedindex; // the serial number of the selected option.
Var val = obj. Options [Index] = New Option ("new text", "New Value ");
8. Delete select
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">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html">
<Head>
<Script language = javasLatency>
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 New Area", "101 "))
Sh. Add (New Option ("Huangpu District", "102 "))
Sh. Add (New Option ("Xuhui District", "103 "))
Sh. Add (New Option ("Putuo District", "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 ("region", "201 "))
NJ. Add (New Option ("White Zone", "202 "))
NJ. Add (New Option ("xianguang 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 = "computing node" onClick = "calc ()">
<Input type = button value = "delete" onClick = "remove ()">
</Body>
</Html>
Based on these things, you can use jqeury Ajax + JSON to implement a small function as follows:
JSCode(Only select-related code is used)
/**
* @ Description component linkage drop-down list (implemented using jquery Ajax and JSON)
* @ Prarm selectid the ID of the drop-down list
* @ Prarm Method Name of the method to be called
* @ Prarm temp store the software ID here
* @ Prarm URL the URL to jump
*/
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 to be accessed
Data: "method =" + method + "& temp =" + temp, // data to be sent
Success: function (MSG) {// MSG is the returned data. Bind The data here.
VaR DATA = msg. lists;
Coverjsontohtml (selectid, data );
}
});
}
/**
* @ Description converts 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 <nodearray. length; I ++ ){
// Create select option
Tempoption = $ J ('<option value = "' + nodearray [I]. DM + '">' + nodearray [I]. MC + '</option> ');
// Put option to select
Tempselect. append (tempoption );
}
// Obtain 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: Position of the subscript to be cleared
*/
Function isclearselect (selectid, index ){
VaR length = Document. getelementbyid (selectid). Options. length;
While (length! = Index ){
// The length is changing because it must be retrieved again.
Length = Document. getelementbyid (selectid). Options. length;
For (VAR I = index; I <length; I ++)
Document. getelementbyid (selectid). Options. Remove (I );
Length = length/2;
}
}
/**
* @ Description: gets the list of degraded components.
* @ Prarm selectid1 ID of the referenced software drop-down list
* @ Prarm selectid2 ID of the degraded component drop-down list
*/
Function getcpgjthgl (selectid1, selectid2 ){
VaR obj1 = Document. getelementbyid (selectid1); // reference the software drop-down list
VaR obj2 = Document. getelementbyid (selectid2); // Degradation Component drop-down list
VaR Len = obj1.options. length;
// If 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 in either of the following ways:
// Isclearselect (selectid2, '1 ');
Document. getelementbyid (selectid2). Length = 1;
For (VAR I = 0; I <Len; I ++ ){
VaR option = obj1.options [I];
// Do not add the selected item of the referenced software
If (I! = Obj1.selectedindex ){
// Clone option and add it to select
Obj2.appendchild (option. clonenode (true ));
}
}
}
HTML code:
| * reference software: | onclick =" linkagetree ('linkage ', 'yyyanytree ', 'yyyymmd', 'yyyymdm', 'linkagetree', '1'); "value =" select... "> |
| * reference version: | |
degraded component:
none
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
