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>

一旦用户从第一个下拉列表中选择了一些选项，就必须显示其他3个选项。

如何实施？

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 。您可以附加选项

如何在选择其他选项的选项时显示选择？

2 个答案: