填充<select></select>盒與另一

Question

<select name="class"> 

    <option> --select class-- </option> 

</select> 

<select name="subject"> 

    <option> --select subject-- </option> 

</select> 

現在我想使用AJAX來填充主題列表框中。我不知道該怎麼做。

Answer 1

您可以訂閱第一個選擇框的更改事件，然後通過傳遞選定的值來觸發對您的服務器的ajax請求。然後在此請求的成功回調中，可以使用服務器返回的JSON數組更新第二個選擇框的內容。下面是這個使用jQuery如何實現的例子：

$(function() { 
    $('.class').change(function() { 
     // when the value of the first select changes trigger an ajax request 
     var value = $(this).val(); 
     $.getJSON('/script.cgi', { selectedValue: value }, function(result) { 
      // assuming the server returned json update the contents of the 
      // second selectbox 
      var subject = $('.subject'); 
      subject.empty(); 
      $.each(result, function(index, item) { 
       result.append(
        $('<option/>', { 
         value: item.value 
         text: item.text 
        }) 
       ); 
      }); 
     }); 
    }); 
}); 

和JSON從服務器返回看起來是這樣的：

[ { value: '1', text: 'subject 1' }, { value: '2', text: 'subject 2' } ]