根据另一个 <select> 的值向 <select> 添加选项答案

【问题标题】：Add options to <select> based on value of another <select>根据另一个 <select> 的值向 <select> 添加选项
【发布时间】：2014-12-28 03:31:12
【问题描述】：

我正在处理一个表单，该表单需要根据用户首先完成的另一个值来填充下拉菜单。

两个选择是“主题”和“主题”。选择主题后，“主题”下拉菜单应包含该主题内的所有主题。例如。对于“数学”主题，“主题”应显示代数、形状等。

我怎样才能做到这一点？两个选择的值都是在 PHP 中完成的。对于第一个选择，使用 for 循环填充选择是一项简单的任务，但似乎第二个选择必须使用 JavaScript。我该怎么办？

提前致谢，伊尔蒙

【问题讨论】：

标签： php html forms select

【解决方案1】：

假设，您的第一个 select 有 2 个 options：

<option value="math">math</option> 
<option value="english">english</option>

所以，您可以像这样加载第二个select 的option：

<option value="math-a">math-a</option>
<option value="math-b">math-b</option>
<option value="english-a">english-a</option>
<option value="english-b">english-a</option>

其中 a 和 b 代表不同的主题。您最初可以使用 jQUery 或 CSS 隐藏第二个 select 的 option。

然后，只需使用 jQuery 根据第一个 select 显示特定的 option，如下所示：

$('#sub').change(function(){
    $('#topic option').css('display', 'none');
    var value = $(this).val();

    if(value){
        $('#topic option').each(function(){
            var topic = $(this).val();
            topic = topic.split('-');
            topic = topic[0];
            if(value == topic){
                $(this).css('display', 'block');
            }
        });
    }
});

Working fiddle.

希望这会奏效！

【讨论】：