Home > Developer > JavaScript
Js select option object Summary
This article mainly summarizes the select option object in js. If you need a friend, please refer to it and hope to help you.
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.
Application 2
The Code is as follows:
<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>
Based on these things, you can use jqeury ajax + JSON to implement a small function as follows:
JS Code: (only SELECT-related code is used)
The Code is as follows:
/**
* @ 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:
The Code is as follows:
<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 = "yyw.mc" id = "yyw.mc" type = "text" class = "Search_input" tabindex = "3" size = "30">
<Input name = "yyyundm" id = "yyyundm" type = "hidden">
<Input type = "button" class = "Search_button_select"
OnClick = "linkAgeTree ('linkage', 'yyyun Tree ', 'yyyun Mc', 'yyyun dm', 'linkagetree ', '1');" value = "Select...">
</Td>
</Tr>
<Tr>
<Td class = "Search_item"> <span class = "Edit_mustinput"> * </span> reference version: </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 component: </td>
<Td class = "Search_content" id = "thgj">
<Select name = "thgjDm" style = "width: 160" id = "thgjDm">
<Option value = "-1" selected> none </option>
</Select>
</Td>
</Tr>
</TABLE>
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
