Home > Developer > JavaScript
Select option Summary
<! -- ======= A piece of code to determine which select option is selected =====================================-->
<Form name = "form1">
<Select name = "file_source" size = "1" id = "file_source"
OnChange = "alert (document. form1.file _ source. options [
Document. form1.file _ source. selectedIndex]. value) ">
<Option value = "selected" selected> selected </option>
<Option value = "office"> Office </option>
<Option value = "Data Center"> data center </option>
<Option value = "Teaching and Research Section"> Teaching and Research Section </option>
<Option value = ""> </option>
</Select>
</Form>
<! -- ===================================================== =========================================== -->
Application:
// Tb2 and th1 are css-defined content
// In <select>
<Table border = "I" cellpadding = "3" cellspacing = "1" align = "center" class = "tb2"
Bordercolor = "#666666">
<Tr> <th colspan = "2" class = "th1"> Edit page <th> </tr>
<Tr>
<Th> MARK </th>
<Td>
<Spring: bind path = "obj. map ['flag']">
<Select name = '<c: out value = "$ {status. expression}"/>'>
<Option value = "0"
<C: if test = "$ {status. value = 0}"> selected </c: if> automatic
</Option>
<Option value = "1"
<C: if test = "$ {status. value = 1}"> selected </c: if> Manual
</Option>
</Select>
</Spring: bind>
</Td>
</Tr>
<Tr>
<Th colspan = "2">
<Input type = "hidden" name = "page number" value = "1"/>
<Input type = "submit" value = "save"/>
<Input type = "button" value = "return"
OnClick = "location. href = 'main. do? Page number = 1 ">
</Th>
</Tr>
</Table>
<! --
About select:
Name = '<c: out value = "$ {status. expression}"/>'
Value = "0"
Name = value
Value corresponds to name: 0 is the value of $ {status. expression }.
In actual operation, select a drop-down menu, which means that
Name assigns the selected value.
About using the link to pass the value: main. do? Page number = 1
The name = "page number" corresponds to value = "1" on the entire page.
Upload them as parameters to other pages in Form (other pages also contain name = "page number" value = "? ")
-->
<! -- ===================================================== =========================================== -->
<! --
Prerequisites:
Select is displayed in the drop-down box, that is, size = "1" (mostly used in this form, more practical)
① Select. options ("id") method to retrieve an option
② It is proved that option indexes cannot be changed through option. index.
③ Exchange indexes using the option swapNode Method
④ Select an option through selectIndex of select
-->
[Full code]
<Head>
<Script>
<! --
Function Start ()
{
// Set "Hong" as the first option to display it first. See how I can obtain this option.
// There should be many such requirements, but I have not found them online
// Note: if multiple IDs are Hong, an option set is returned.
// Id/name cannot be Chinese characters. It takes only half a day to find out why
Var source = document. form1.selTest. options ("hong ");
Alert ("change [" + source. innerHTML + "] to the top ");
// Switch location
Source. swapNode (document. form1.selTest. options (0 ));
// You can use [], Why?
Source. swapNode (document. form1.selTest. options [0]);
// Daily, I thought the exchange was not successful. It turns out that the selected item has not changed. Let's select it.
Document. form1.selTest. selectedIndex = 0;
// Note: This method mainly gives a string and places the same items as the string to the nth position.
// You just thought you could get this item as follows:
// Document. getElementById ("hong"). innerHTML;
}
Function AX ()
{
// Obtain the div for display
Var show = document. getElementById ("show ");
Var tempIndex = document. form1.selTest. selectedIndex;
Show. innerHTML = "selected index:" + document. form1.selTest. selectedIndex + "<br> ";
Show. innerHTML + = "the value of the selected item: (directly retrieve, simplest)" + document. form1.selTest. value + "<br> ";
Show. innerHTML + = "value of the selected item:" + document. form1.selTest. options (tempIndex). value + "<br> ";
Show. innerHTML + = "display part of the selected item (it is very troublesome to use indexes):" + document. form1.selTest. options (tempIndex). innerHTML;
Show. innerHTML + = "display part of the selected item (via index, followed by text, Why ?) : "+ Document. form1.selTest. options (tempIndex). text;
}
-->
</Script>
</Head>
<BODY>
<FORM name = "form1">
<Div id = "show"> </div> & nbsp; & nbsp;
<SELECT name = "selTest"
Onchange = "javascript: AX ();">
<Option value = "AX0"> Zhang </option>
<OPTION id = "hong" VALUE = "AX1"> hong </option>
<Option value = "AX2"> Zhi </option>
</SELECT>
<Input value = "change the order of Options" type = "button" onClick = "javascript: Start ();">
</FORM>
</BODY>
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
