Php 切换下拉列表

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

**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>

当我从第一个下拉列表中选择第二个选项值将切换的选项时，我如何做到这一点

---

感谢您的帮助

它被称为层次选择、链式选择或相关选择

---

我喜欢这个jquery插件：

调用javascript函数event onchange

在函数中，使用以下命令

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

---

所以，对于第一个列表中的每个下拉列表值，都有预定义的值

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

---

如果您有一个固定的页面加载选项，那么这里有一种方法可以实现您想要的

给出第一个选择和第二个选择之间的关系，如下所示：

---

查看此..

我从第一个下拉列表中选择一个选项，第二个下拉列表的选项值将切换。你说的转换是什么意思？请给出更多示例。如果我选择例如userban dropdown one，我会在dropdown 2中获得指定的选项值，当我在dropdown one中选择另一个选项值时，该选项值不会显示。第一个下拉值与第二个下拉值的关系如何？Justinas，还没有完成。我不明白我怎么能做到。如果有人能解释一下，那就太好了。谢谢。您必须在更改第一个下拉列表时调用javascript函数…在函数中，根据收到的值为第二个下拉列表赋值。

<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').change(function(){
     $('.drop').hide(); // hide all dropdowns
     id = $('option:selected', this).data('show'); // take relevant id
     $(id).show(); // show that dropdown with above id
});

<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>

 $("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();
        }
    });
});