根據另一個值添加選項到<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。

希望這會起作用！