向...添加選項 <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');
            }
        });
    }
});

工作提琴 。

希望這會成功！