Заполните поле <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' } ]