如何仅在选择其他select's选项时显示选择

How to display a select only when other select's option was chosen?

本文关键字：选择 选项 显示 何仅 其他 select      更新时间：2023-09-26

我在一个页面上有4个选择，只有第一个是可见的。另外，第一个选择具有基本的提示字符串:像这样选择person:

<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个选项。

如何实现?

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

    <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;
    }
})

你必须使用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您可以附加

选项
相关文章：