Question

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

我想显示用户选择左侧菜单上方左侧菜单的选项，以及右侧菜单上方右侧菜单中选择的值。两个选项可以相同或不同，只是文本，并且不会相互影响。

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

这就是我现在的代码：

struct info

如果有人可以帮帮忙，我将不胜感激！试着在没有外部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>

如何在页面上的其他位置显示下拉菜单的值？

3 个答案: