HTML JavaScript下拉列表已选择索引

HTML JavaScript Dropdown selectedIndex

本文关键字：选择 索引 下拉列表 JavaScript HTML      更新时间：2023-09-26

我正在尝试使用下拉菜单来更改文本框，但似乎遇到了问题。

<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>

可能只是：

var a = dropdown1.selectedIndex;

如果您试图检查是否选择了第零个选项。

要么这样，要么在HTML中给你的选项值，然后自己检查这些值。

您需要按如下方式选择值属性：

var a = dropdown1.options[dropdown1.selectedIndex].value;

这应该可以工作。请注意，"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";
}
}

或

 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";
    }
    }

我建议你这样做：

<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>

代码的更改：

  1. 首先，看看选择框，所有选项标记现在都有一个"value"属性。这告诉浏览器在选择某个选项时输入应具有的值。您也可以利用这一点来设置比选项内容更短的值，例如，当您有国家/地区选择工具时，其中一个选项可能是<option value='US'>United Stated</option>
  2. 在您的脚本中，您不再有if语句，我们只是将文本框的值设置为选择框的值
var a = dropdown1.selectedIndex;
    if(a == 0){
      textbox.value = "hi";
    } else if(a == 1) {
      textbox.value = "bye";
    }
    }

您将所选项目的值存储在变量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";
    }
}

$('#selectid option:nth-child(1)').attr('selected', 'selected');
相关文章：