Question

我编写了一个简单的HTML页面，在按钮单击事件中，下拉列表中的选定值将打印在文本框中。我已经使用javascript完成此任务。我不知道为什么它不起作用，虽然逻辑对我来说似乎没问题。任何帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sample</title>
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <select id="drpdwn" name="drpdwn">
                     <option selected>Select</option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" name="textbox" id="textbox">
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="myFunction()">Go</button>
            </td>
        </tr>
    </table>

    <script>
    myFunction() {
        var el = document.getElementById("drpdwn");
        var sel_value = el.options[el.selectedIndex].value;
        document.getElementById("textbox").value = sel_value;
    }
    </script>

</body>
</html>

Answer 1

我认为问题在于您尝试使用el.options[el.selectedIndex].value;获取选择的值我对你的代码片段做了很少的修正，以便它工作，也使用querySelector，它在可重用性方面比getElementById

好得多

document.querySelector('.btn').addEventListener('click',function() {
  var el = document.querySelector("#drpdwn");
  var sel_value = el.value;
  document.querySelector("#textbox").value=sel_value;
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Sample</title>
</head>

<body>
  <table align="center">
    <tr>
      <td>
        <select id="drpdwn" name="drpdwn">
                     <option selected>Select</option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="textbox" id="textbox">
      </td>
    </tr>
    <tr>
      <td>
        <button class="btn" type="submit">Go</button>
      </td>
    </tr>
  </table>

</body>

</html>

Answer 2

要从select元素中获取选项值，您只需执行el.value

这个版本仅使用没有jQuery库的vanilla javascript来完成工作：

document.addEventListener("DOMContentLoaded", function(event) { 
    var el = document.getElementById("drpdwn");
    var button = document.getElementsByClassName('btn')[0];
    var textBox = document.getElementById("textbox");
    button.onclick = function() { 
        textBox.value = el.value;
    }
});

从Dropdown获取价值时，Javascript无法正常工作

2 个答案: