Question

我正在制作一个下拉开关。我的意思是当我选择第一个下拉选项时，第二个将显示指定的消息预设而不是第一个。

**Dropdown one**
<select name="bantype">
    <option value="user">User ban</option>
    <option value="ip">IP ban</option>
    <option value="system">System ban</option>
</select></br></br>

**Dropdown two**
<select name="reason">
    <option value="Sexual harassment">Sexual harassment</option>
</select>

当我从第一个下拉列表中选择第二个选项的值将会切换时，我该怎么做？

感谢您的帮助

Answer 1

它被称为hierselect，链式或相关选择。

我喜欢这个jquery插件：http://www.appelsiini.net/projects/chained

Answer 2

调用javascript函数事件onchange，

<select name="bantype" onchange="getoptions(this.value);">
   <option value="user">User ban</option>
   <option value="ip">IP ban</option>
   <option value="system">System ban</option>
</select><br/><br/>

<select name="reason" id="reason"></select>

在您的功能中，使用以下

getoptions(val) {
    if(val == 'user') {
         var your_options = '<option value="abc">Abc</option>';
         jQuery('#reason').html(your_options);
         jQuery('#reason').show(); // if second dropdown is hidden
    }
}

Answer 3

因此，您为第一个列表中的每个下拉列值预定义了值

<select id="first">
   <option value='ban' data-show="#optionsOne">Ban Ban</option>
   <option value='banAll' data-show="#optionsTwo">Ban All</option>
</select>

您的每个选项都有其他（隐藏）下拉列表：

<select id="optionsOne" class='drop'>...</select>
<select id="optionsTwo" class='drop'>...</select>

当#first更改值时，显示相对下拉列表：

$('#first').change(function(){
     $('.drop').hide(); // hide all dropdowns
     id = $('option:selected', this).data('show'); // take relevant id
     $(id).show(); // show that dropdown with above id
});

Answer 4

如果你在页面加载时有一个固定的选项，那么这是实现你想要的一种方法。

在第一个select和第二个之间建立关系，如下所示：

<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>

**Dropdown two**
<select name="reason">
<option class="user" value="a">a</option>
<option class="user" value="d">d</option>
<option class="ip" value="b">b</option>
<option class="system" value="c">c</option>
</select>

使用jQuery show和hide选项，就像这样

 $("select[name='reason'] option").each(function(){
     $(this).hide();
 });
$("select[name='bantype']").on("change", function(){
    var selected = $(this).val();
    $("select[name='reason'] option").each(function(){
        if($(this).prop("class") != selected){
            $(this).hide();
        }else{
            $(this).show();
        }
    });
});

查看此DEMO ..

切换下拉列表

4 个答案: