根据另一个值添加选项到<select><select>

Question

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

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

我该如何做到这一点？这两个选择的值都是在PHP中完成的。对于第一个选择，这是一个简单的任务，使用for循环来扩展选择，但似乎JavaScript必须用于第二个。我该怎么做呢？

由于提前， Ilmiont

Answer 1

假设，你的第一个select有2个option S：

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

希望这会起作用！