如何在页面的其他地方显示下拉菜单的值？

Question

我有一个非常简单的 HTML 页面，有两个下拉菜单，一个在左边，一个在右边。

我想在左侧菜单上方显示用户从左侧菜单中选择的选项，在右侧菜单上方显示从右侧菜单中选择的值。两个选项可以相同也可以不同，只是文字，互不影响。

到目前为止，我已经尝试了所解释的所有解决方案 here and here 但没有任何效果，即使我只是将确切的示例代码复制并粘贴到我的 html 页面中也是如此。

这就是我的代码现在的样子：

<html>
<body>

<head>

<script type="text/javascript">

var select = document.getElementById('cmbitems');
var input = document.getElementById('txtname');
select.onchange = function() {
    input.value = select.value;
}


</script>


</head>


<table>
    <tr>
        <td colspan="2">DISPLAY</td>
    </tr>
    
        <tr>
        <td>RESULT 1 <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()"></td>
        <td>RESULT 2</td>
    </tr>
    <tr>
    
    <tr>
        <td>
        
        BEGINNING
        
        
<select name="cmbitems" id="cmbitems">
    <option value="name1">flow</option>
    <option value="name2">green</option>
    <option value="name3">red</option>
</select>      
        
        
        
        
        
        
        </td>
        <td>END
          
        
        
        </td>
    </tr>
</table>


</body>
</html>

如果有人可以提供帮助，我将不胜感激！尝试在没有外部 JS 或 JQuery 调用的情况下仅制作一页...谢谢！

Answer 1

尝试将脚本放在 </body>.

之前

还要尝试整理你的代码，你的 <head></head> 在你的正文标签中。

<html>

<head>
</head>

<body>

  <table>
    <tr>
      <td colspan="2">DISPLAY</td>
    </tr>

    <tr>
      <td>RESULT 1
        <input type="text" name="cmbitems" id="cmbitems" onClick="checkItem()">
      </td>
      <td>RESULT 2</td>
    </tr>
    <tr>

      <tr>
        <td>

          BEGINNING


          <select name="cmbitems" id="cmbitems">
            <option value="name1">flow</option>
            <option value="name2">green</option>
            <option value="name3">red</option>
          </select>

          <script type="text/javascript">
            var select = document.getElementById('cmbitems');
            var input = document.getElementById('txtname');
            select.onchange = function() {
              input.value = select.value;
            }
          </script>
</body>

</html>

Answer 2

你这个代码

<html>
<body>

<head>

<script type="text/javascript">

var select = document.getElementById('cmbitems');

  var input1 = document.getElementById('txtname');
  var input2 = document.getElementById('txtname2');
  select.onchange = function() {
     input1.value = select.value;
     input2.value = select.options[select.selectedIndex].text;
   }


</script>


</head>


    <table>
    <tr>
        <td colspan="2">DISPLAY</td>
    </tr>

        <tr>
            <td>RESULT 1 <input type="text" name="cmbitems" id="txtname" onClick="checkItem()" /></td>
        <td>RESULT 2
          <input type="text" name="cmbitems" id="txtname2" onClick="checkItem()" />  
            </td>
    </tr>


    <tr>
        <td>

        BEGINNING


<select name="cmbitems" id="cmbitems">
    <option value="name1">flow</option>
    <option value="name2">green</option>
    <option value="name3">red</option>
</select>      
        </td>
        <td>END
        </td>
    </tr>
</table>


</body>
</html>

Answer 3

您的代码存在几个问题：

将 <script>...</script> 块放在页面末尾，否则 JS 将找不到您在代码中引用的 html 节点，因为页面未加载
您正在定义两个具有相同 ID 的 html 元素，当您尝试通过其 ID 查找一个元素时，这会破坏 JS 代码。这是工作版本：

<html>

<head></head>

<body>
  
<table>
<tr>
<td colspan="2">DISPLAY</td>
</tr>

<tr>
<td>CHOICE 1 <input type="text" id="txtname" name="txtname" onClick="checkItem()"></td>
<td>CHOICE 2 <input type="text" id="txtname2" name="txtname2" onClick="checkItem()"></td>
</tr>
<tr>

<tr>
<td>

BEGINNING

<select name="cmbitems" id="cmbitems">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="turtle">turtle</option>
</select>      

</td>

<td>END


<select name="cmbitems2" id="cmbitems2">
<option value="flow">flow</option>
<option value="green">green</option>
<option value="red">red</option>
</select> 

</td>
</tr>
</table>

<script type="text/javascript">

// script for left side menu
var select = document.getElementById('cmbitems'),
input = document.getElementById('txtname');

select.onchange = function() {
input.value = select.value;
}


// script for right side menu
var select2 = document.getElementById('cmbitems2'),
input2 = document.getElementById('txtname2');

select2.onchange = function() {
input2.value = select2.value;
}

</script>
</body>
</html>

如何在页面的其他地方显示下拉菜单的值？

How to display the value of a drop down menu somewhere else on a page?

html

javascript

drop-down-menu