Home > Developer > JavaScript
1. Obtain the value and text of the selected items in the drop-down list (select)
Sample Code select.htm:
Copy codeThe Code is as follows:
<Html>
<Head> <title> obtain the value and text of the selected item in the drop-down list </title> <Body>
<Script>
// Obtain the text of the selected item in the drop-down list
Function getSelectedText (name ){
Var obj = document. getElementById (name );
For (I = 0; I <obj. length; I ++ ){
If (obj [I]. selected = true ){
Return obj [I]. innerText; // the key is to obtain the option text through the innerText attribute of the option object.
}
}
}
// Obtain the value of the selected item in the drop-down list
Function getSelectedValue (name ){
Var obj = document. getElementById (name );
Return obj. value; // This is simple and can be obtained directly using the value Attribute of the object.
}
</Script>
<Select id = "myselect">
<Option value = "fist"> 1 </option>
<Option value = "second"> 2 </option>
<Option value = "third"> 3 </option>
</Select>
<Input type = "button" value = "selected text"/>
<Input type = "button" value = "selected value"/>
</Body>
</Html>
2. Obtain the value of the radio button group and modify the selected items
I have seen many posts saying that js can directly use document to obtain the value of a single-choice button (radio) group. getElementById ("delimiter "). value, although the drop-down list (also an array of list items) with the same as the button group selected for a single item is also an array, the value of the drop-down list can be obtained in this way, however, the selected value is not displayed in the single-choice button group. After careful research, the summary is as follows:
Unlike the drop-down list, the single-choice button must use this. form. optional or document. getElementsByName ('authorization') method to obtain the array object, document. getElementById ('ignore') cannot obtain this array object (select can ). In addition, to obtain the value, it must be obtained through a loop judgment. value (select can) cannot be used directly ). To change the selected items of a Single-choice button group, you must use a loop to determine and change the value of each single-choice button.
The test code radio.html is as follows:
Copy codeThe Code is as follows:
<Html>
<Head> <Script language = "javascript">
// Calculate the value of the single-choice button, which is applicable to the single option and multiple options. If this parameter is not selected, false is returned. If this parameter is selected, the option value is returned.
Function getRadio (oRadio ){
Var oRadioLength = oRadio. length;
Var oRadioValue = false;
// Alert ("oRadioLength: [" + oRadioLength + "]");
If (oRadioLength = undefined ){
If (oRadio. checked ){
ORadioValue = oRadio. value;
}
} Else {
For (I = 0; I <oRadioLength; I ++ ){
// Alert ("oRadio [" + I + "]:" + oRadio [I]. checked + "/" + oRadio [I]. value );
If (oRadio [I]. checked ){
ORadioValue = oRadio [I]. value;
Break;
}
}
}
Return oRadioValue;
}
// Method Improvement:
// Calculate the value of the single-choice button and pass the radio name as the parameter. If this parameter is not selected, false is returned. If this parameter is selected, the option value is returned.
Function getRadioValue (name ){
Var radioes = document. getElementsByName (name );
For (var I = 0; I <radioes. length; I ++)
{
If (radioes [I]. checked ){
Return radioes [I]. value;
}
}
Return false;
}
// Modify the selected radio button with the value
Function changeRadio (oRadio, oRadioValue) {// input an object
For (var I = 0; I <oRadio. length; I ++) // Loop
{
If (oRadio [I]. value = oRadioValue) // compare the value
{
ORadio [I]. checked = true; // modify the selected status
Break; // stop the loop
}
}
}
// Improvement:
// Modify the selected radio button with the value
Function setRadio (name, sRadioValue) {// input the name of radio and the value of the selected item
Var oRadio = document. getElementsByName (name );
For (var I = 0; I <oRadio. length; I ++) // Loop
{
If (oRadio [I]. value = sRadioValue) // compare the value
{
ORadio [I]. checked = true; // modify the selected status
Break; // stop the loop
}
}
}
</Script>
<Body>
<Form name = "frm">
<Input type = "radio" name = "comment" value = "agree"> agree </td>
<Input type = "radio" name = "comment" value = "downchange" checked> send changes </td>
<Input type = "radio" name = "comment" value = "refuse"> warranty rejected </td>
<Input type = "radio" name = "comment" value = "report"> report </td>
[Br]
Alert ('result: '+ getRadio (this. form. Example ))
<Input type = "button" name = "test1" value = "button 1">
[Br]
Alert ('result: '+ getRadio (document. getElementById ('authorization ')))
<Input type = "button" name = "test2" value = "button 2">
[Br]
Alert (this. form. pipeline. value)
<Input type = "button" name = "test3" value = "button 3">
[Br]
ChangeRadio (this. form. Upload, "Report ")
<Input type = "button" name = "test4" value = "button 4">
[Br] [br] [br] [br]
<Select id = "slt">
<Option value = "agree"> agree </option>
<Option value = "downchange" selected> Issue changes </option>
<Option value = "refuse"> warranty rejected </option>
<Option value = "report"> report </option>
</Select>
[Br]
Alert (this. form. slt. value)
<Input type = "button" name = "test5" value = "button 5">
[Br]
Document. getElementById ('slt') [2]. innerText)
<Input type = "button" name = "test6" value = "button 6">
</Form>
</Body>
</Html>
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
