HTML JavaScript Dropdown selectedIndex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6573597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML JavaScript Dropdown selectedIndex
提问by yanike
I'm trying to get the dropdown to change the textbox, but seem to be having issues.
我正在尝试使用下拉菜单来更改文本框，但似乎遇到了问题。
<head>
<title>DropDown</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<script type="text/javascript">
function chkind() {
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex];
if(a == 0){
textbox.value = "hi";
} else if(a == 1) {
textbox.value = "bye";
}
}
</script>
</head>
<body>
<select onchange="chkind()" id="dropdown1">
<option>Hi</option>
<option>Bye</option>
</select><br />
<input id="textbox" type="text" />
</body>
回答by ADW
Probably just:
大概只是：
var a = dropdown1.selectedIndex;
if you're trying to check that the zeroth option is selected.
如果您尝试检查是否选择了第零个选项。
Either that, or give your options values in the HTML and check the values themself.
要么，要么在 HTML 中提供您的选项值并自行检查值。
回答by NakedBrunch
You need to select the value property as follows:
您需要按如下方式选择 value 属性：
var a = dropdown1.options[dropdown1.selectedIndex].value;
回答by bigblind
I'd advice you to do it this way:
我建议你这样做：
<head>
<title>DropDown</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<script type="text/javascript">
function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
textbox.value=dropdown1.value;
}
</script>
</head>
<body>
<select onchange="chkind()" id="dropdown1"><option value='Hi'>Hi</option><option value = 'Bye'>Bye</option></select><br /><input id="textbox" type="text" />
</body>
the changes to the code:
对代码的更改：
- First of all, take a look at the select box, all the option tags now have a 'value' attribute. This tells the browser what the value the input should have when a certain option is selected. You can also use this to your advantage to set shorter values than the content of the option, for example, when you have a country selection tool, one of your options could be
<option value='US'>United Stated</option>. - In your script, you don't have an if-statement anymore, we just set the value of the text box to the value of your select box.
- 首先，看看选择框，所有选项标签现在都有一个“值”属性。这会告诉浏览器在选择某个选项时输入应具有的值。您还可以利用它来设置比选项内容更短的值，例如，当您使用国家/地区选择工具时，您的选项之一可能是
<option value='US'>United Stated</option>. - 在您的脚本中，您不再有 if 语句，我们只是将文本框的值设置为选择框的值。
回答by lihnid
this should work. Please note that 'a' is the DOM element (Option)
这应该有效。请注意，'a' 是 DOM 元素（选项）
function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex];
if(a.index == 0){
textbox.value = "hi";
} else if(a.index == 1) {
textbox.value = "bye";
}
}
or
或者
function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
if(dropdown1.selectedIndex == 0){
textbox.value = "hi";
} else if(dropdown1.selectedIndex == 1) {
textbox.value = "bye";
}
}
回答by Ovais Khatri
var a = dropdown1.selectedIndex;
if(a == 0){
textbox.value = "hi";
} else if(a == 1) {
textbox.value = "bye";
}
}
回答by Alex
You are storing the value of the selected item in the variable aso it can not be compared against its index. See below for the corrected version.
您将所选项目的值存储在变量中，a因此无法与其索引进行比较。请参阅下面的更正版本。
function chkind(){
var dropdown1 = document.getElementById('dropdown1');
var textbox = document.getElementById('textbox');
var a = dropdown1.selectedIndex;
if(a == 0){
textbox.text = "hi";
} else if(a == 1) {
textbox.value = "bye";
}
}
回答by Imran
$('#selectid option:nth-child(1)').attr('selected', 'selected');
