Javascript 如何在页面的其他位置显示下拉菜单的值？_Javascript_Html_Drop Down Menu

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

javascript html drop-down-menu

Javascript 如何在页面的其他位置显示下拉菜单的值？,javascript,html,drop-down-menu,Javascript,Html,Drop Down Menu,我有一个非常简单的HTML页面，有两个下拉菜单，一个在左边，一个在右边我想在左菜单上方显示用户选择的左菜单选项，并在右菜单上方显示右菜单中选择的值。这两个选项可以相同也可以不同，只是文本，并且不会相互影响到目前为止，我已经尝试了所有解释过的解决方案，但没有任何效果，即使我只是将确切的示例代码复制并粘贴到我的html页面中这就是我的代码现在的样子： var select=document.getElementById（'cmbitems'）； var input=document.ge

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

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

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

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


var select=document.getElementById（'cmbitems'）；
var input=document.getElementById（'txtname'）；
select.onchange=function（）{
input.value=select.value；
}
展示
结果1
结果2
开始
流
绿色
红色
结束

尝试将脚本放在

之前

同时还要整理你的代码，你的

在你的身体标签里


展示
结果1
结果2
开始
流
绿色
红色
var select=document.getElementById（'cmbitems'）；
var input=document.getElementById（'txtname'）；
select.onchange=function（）{
input.value=select.value；
}

您可以使用此代码

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


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；
}
展示
结果1
结果2
开始
流
绿色
红色
结束

您的代码有几个问题：

将

…

块放在页面的末尾，否则JS将找不到代码中引用的html节点，因为页面未加载

您正在定义两个具有相同ID的html元素，当您试图通过ID查找一个元素时，这会破坏JS代码。这是工作版本：


展示
选择1
选择2
开始
橙色
苹果
乌龟
结束
流
绿色
红色
//左侧菜单的脚本
var select=document.getElementById（'cmbitems'），
输入=document.getElementById（'txtname'）；
select.onchange=function（）{
input.value=select.value；
}
//右侧菜单的脚本
var select2=document.getElementById（'cmbitems2'），
input2=document.getElementById（'txtname2'）；
选择2.onchange=function（）{
input2.value=选择2.value；
}

您想在单独的输入框中显示下拉选择的值和文本吗基本上我希望它看起来/工作如下：
标题
菜单1中选择的单词-菜单2中选择的单词
菜单1-菜单2我试图运行您从JSFIDLE建议的代码，但似乎不起作用非常感谢Manuel！这帮了大忙。虽然现在，我正在努力使这两个菜单功能正常。我让右边的那个工作，但现在左边的那个不工作了。您可以在这里看到结果（我不能在注释中粘贴代码）：必须定义不同的变量名，否则将覆盖对DOM元素的引用。我编辑了这个片段，看一看。这太棒了，谢谢！你解决了这个问题！我本以为我可以单独编写代码，但你的帮助是无价的！谢谢