仅当选择了其他选择的选项时，如何显示选择？

Question

我在页面上有4个选择，只有第一个可见。 同样，第一个选择具有基本的提示字符串： 选择这样的人 ：

<select name="post[person_id]">
  <option value="">Choose person</option>
  <option value="1">David</option>
  <option value="2">Sam</option>
  <option value="3">Tobias</option>
</select>

一旦用户从第一个下拉菜单中选择了某个选项，其他三个选项就必须显示出来。

如何执行呢？

Answer 1

这是一个简单的jquery解决方案。 关键是使用.change事件并将其连接到您的下拉列表。

HTML

    <select id="controllerDD">
        <option value="">Select...</option>
        <option value="Show 1">Show 1</option>
        <option value="Show 2">Show 2</option>
        <option value="Show All">Show All</option>
    </select>
    <p>DD 1</p>
    <select id="DD1" style="display:none">
        <option value="blah">Select...</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
    </select>
    <p>DD 2</p>
    <select id="DD2" style="display:none">
        <option value="blah">Select...</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
        <option value="blah">blah</option>
    </select>

JavaScript的

$('#controllerDD').change(function (e) {
    var selected = $(e.currentTarget).val();
    $('#DD1').hide();
    $('#DD2').hide();
    switch (selected) {
        case "Show 1":
            $('#DD1').show();
            break;
        case "Show 2":
            $('#DD2').show();
            break;
        case "Show All":
            $('#DD1').show();
            $('#DD2').show();
            break;
        default:
            break;
    }
})

Answer 2

您必须使用onchange方法。

<select onchange="myFunction()">

<script>
function myFunction(){

// fetch new data for the next select. 

//append the new options on next select. 

// make select available or enabled 

}

</script>

对于第一个选择，请使用onchange来获取 （填充） 下一个选择的选项。 并对以下选择执行相同的操作。

您也可以在完成填充选择的实例中获取并使其可用。

如果您不使用jQuery 。 您可以附加选项