向...添加选项 <select>基于另一个的价值<select>

Question

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

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

我该如何实现？ 两个选择的值都在PHP中完成。 对于第一个选择，使用for循环填充选择很简单，但是似乎第二个必须使用JavaScript。 我该怎么办？

在此先感谢Ilmiont

Answer 1

假设您的第一个select具有2个option ：

<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代表不同的主题 。 您最初option使用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');
            }
        });
    }
});

工作提琴 。

希望这会成功！