Question

我是javascript的新手。我希望有人可以帮我解决我的问题。我希望我的表单在选择第一个下拉列表后显示另一个下拉列表。第二次下拉取决于在第一个下拉列表中选择的选项。谢谢！

<body>
<div class="control-group">
        <label class="control-label" for="input01">Select</label>
        <div class="controls"> 
          <select name="client_orderid" id="options" onchange="showText()">
          <option value="A"> A</option>
          <option value="B"> B</option>
          <option value="C"> C</option>
            </select> <br>

            <div class="control-group" id="showA" style="display:none;">
            <select name="client_orderid" id="options" onchange="showText()">
              <option value="blue"> blue</option>
              <option value="green"> green</option>
              <option value="yellow"> yellow</option>
            </select>
            </div>

            <div class="control-group" id="showB" style="display:none;">
            <select name="client_orderid" id="options" onchange="showText()">
              <option value="sun"> sun</option>
              <option value="sky"> sky</option>
              <option value="tree"> tree</option>
            </select>
            </div>

            <div class="control-group" id="showC" style="display:none;">
            <select name="client_orderid" id="options" onchange="showText()">
              <option value="dog"> dog</option>
              <option value="cat"> cat</option>
              <option value="fish"> fish</option>
            </select>
            </div>

        </div>
      </div>

Answer 1

最初，只显示第一个下拉隐藏其他人。

所以改变第一场秀第二场像

$("#1stDropdown").change(function(){
    $("#2nsDropdown").show();
});

等等

Answer 2

要纠正的一些要点 -

1 - 默认隐藏第二个下拉列表，并在第一个下拉列表更改时显示。

2 - 也可以在不同选择的更改上调用不同的函数。

所有元素的3-Id应该是唯一的。如果您希望它相同，请使用class

<div class="control-group">
        <label class="control-label" for="input01">Select</label>
        <div class="controls"> 
          <select name="client_orderid" id="options1" onchange="showTexColor()">
          <option value="A"> A</option>
          <option value="B"> B</option>
          <option value="C"> C</option>
            </select> <br>

            <div class="control-group" id="showA" style="display:none;">
            <select name="client_orderid" id="options2" onchange="showTextNature()">
              <option value="blue"> blue</option>
              <option value="green"> green</option>
              <option value="yellow"> yellow</option>
            </select>
            </div>

            <div class="control-group" id="showB" style="display:none;">
            <select name="client_orderid" id="options3" onchange="showTextAnimal()">
              <option value="sun"> sun</option>
              <option value="sky"> sky</option>
              <option value="tree"> tree</option>
            </select>
            </div>

            <div class="control-group" id="showC" style="display:none;">
            <select name="client_orderid" id="options4" onchange="showText()">
              <option value="dog"> dog</option>
              <option value="cat"> cat</option>
              <option value="fish"> fish</option>
            </select>
            </div>

        </div>
      </div>

演示：http://jsfiddle.net/fqzturn4/

Answer 3

首先，将所选值传递给函数：

<select name="client_orderid" id="options" onchange="showText(this.value)">

然后，在函数中，根据与元素ID匹配的值显示或隐藏相应的div（我假设“A”应该与“showA”匹配，依此类推）：

function showText(value) {
    var elements = document.querySelectorAll('.controls .control-group');
    var re = new RegExp( value + '$');

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      elements[i].style.display = re.test(elements[i].id)? '' : 'none';
    }
}

showText 应仅用于第一个选择，而不是其他选择，除非有一些你没有解释过的逻辑。

先选择下拉，然后显示第二个下拉菜单

3 个答案: