HTML - 将 SELECT 标记内容放入 INPUT type = "text"

Posted 2023-02-22

【中文标题】HTML - 将 SELECT 标记内容放入 INPUT type = "text"

【英文标题】：HTML - Put SELECT tag content into INPUT type = "text"

【发布时间】：2011-02-02 03:06:00

【问题描述】：

我在网页中有一个表单，我想将下拉列表中的选定项目放入测试框。我到目前为止的代码如下：

            <form action = "">
                <select name = "Cities">
                  <option value="----">--Select--</option>
                  <option value="roma">Roma</option>
                  <option value="torino">Torino</option>
                  <option value="milan">Milan</option>
                </select>
                <br/>
                <br/>
                <input type="button" value="Test">
                <input type="text" name="SelectedCity" value="" />
            </form>

我想我需要使用 javascript .... 但有什么帮助吗？ :-)

谢谢

【参考方案1】：

您可以将 JavaScript 直接添加到按钮中：

<input type="button" onclick="
    var s = this.form.elements['Cities'];
    this.form.elements['SelectedCity'].value =
      s.options[s.selectedIndex].textContent">

【讨论】：

谢谢 .. 当一个人更改下拉列表的值但我需要在按下按钮后输入该值时会起作用

忽略之前的更新，我看错了你。现在它应该可以根据需要工作了。

【参考方案2】：

 <script type="text/javascript">
    function OnDropDownChange(dropDown) 
        var selectedValue = dropDown.options[dropDown.selectedIndex].value;
        document.getElementById("txtSelectedCity").value = selectedValue;
    
 </script>

        <form action = "">
            <select name = "Cities" onChange="OnDropDownChange(this);">
              <option value="----">--Select--</option>
              <option value="roma">Roma</option>
              <option value="torino">Torino</option>
              <option value="milan">Milan</option>
            </select>
            <br/>
            <br/>
            <input type="button" value="Test">
            <input type="text" id="txtSelectedCity" name="SelectedCity" value="" />
        </form>

【讨论】：

您不必为内联事件处理程序添加前缀javascript:。

还要注意getElementsByName()返回一个列表而不是单个节点，所以你需要访问它的第一个元素：.getElementsByName('SelectedCity')[0].value = ...

你是对的，感谢您指出这一点。删除了前缀“javascript:”并修改了脚本，以便您可以使用此类 ID 而不是元素列表从确切的元素中获取它。

【参考方案3】：

其实你不需要任何 JS 来做，只需 html 就可以为你做，如下：

<form action="a.php" method="post">
  <select name = "Car">
    <option value="BMW">BMW</option>
    <option value="AUDI">AUDI</option>
  </select>
  <input type="submit" value="Submit">
</form>