Question

我有一个页面，它使用基本脚本根据下拉选择在div中生成文本。

我遇到的问题是我希望有2个下拉列表，每个下拉列表都在自己单独的Div中填充文本。每当我尝试这样做时，第一个下拉列表就会停止运行。

这是我的代码

<HTML>
<head>

</head>
<body>





<script type="text/javascript">
        function showText(){
           var value = document.getElementById('options').value;
           if(value != ""){
             document.getElementById('show').innerHTML = value;
             document.getElementById('show').style.display = "block";
           }
        }
    </script>
        <select id="options" onchange="showText()">
            <option value=""></option>
            <option value="1-1">Option 1-1</option>
            <option value="1-2">Option 1-2</option>
            <option value="1-3">Option 1-3</option>

        </select>

<script type="text/javascript">
        function showText(){
           var value2 = document.getElementById('options2').value;
           if(value2 != ""){
             document.getElementById('show2').innerHTML = value2;
             document.getElementById('show2').style.display = "block";
           }
        }
    </script>
        <select id="options2" onchange="showText()">
            <option value=""></option>
            <option value="2-1">Option 2-1</option>
            <option value="2-2">Option 2-2</option>
            <option value="2-3">Option 2-3</option>

        </select>

<table>
  <tr>
    <td><div id="show" style="display:none;padding-top: 20px; width: 500px;"></div></td>
    <td><div id="show2" style="display:none;padding-top: 20px; width: 500px;"></div></td>
  </tr>
</table>        



</body>
</html>

Answer 1

在两个脚本标记中删除重复的函数showText（）！

Answer 2

您的下拉列表都调用相同的功能，更改功能名称，它将解决您的问题。

e.g。

function showText() {
....
<select id="options" onchange="showText()">
....
function showText2() {
....
<select id="options2" onchange="showText2()">
....

多个Java下拉列表填充多个div中的文本。

2 个答案: