загрузка списка значений в listbox на основе другого значения listbox

#php #javascript #html #database

#php #javascript #HTML #База данных

Вопрос:

загрузка другого списка значений (из базы данных) в listbox при изменении другого значения listbox, например: Первое поле списка: -выберите класс-

Второе окно списка: -выберите тему-

Пожалуйста, помогите, спасибо

Ответ №1:

Основная идея состоит в том, чтобы отправить эти данные на сервер (либо с помощью POST back, либо AJAX), а затем ответить данными.

 <select id="mySel" onChange="sendData()">
  

Что я там сделал, так это добавил javascript функцию, которая вызывается каждый раз, когда изменяется раскрывающееся значение.

 function sendData() {
    $.post("processData.php", {selected: $(this).val()}, updateData(data));
}
  

Это скелет функции, которую я бы написал для события select onChange. Я пропустил один или два шага здесь и использовал jQuery, чтобы помочь создать AJAX-запрос обратно на сервер. Я буду вызывать свой php-скрипт processData.php , чтобы помочь обработать, какой элемент был выбран. Они {} содержат данные, которые я хочу отправить на сервер, в данном случае выбранное значение. И, наконец, что делать, когда я получу данные обратно с сервера.

Теперь я был бы в своем php-файле и мог обрабатывать данные, которые я ввел, и запускать свой запрос для получения новых данных. После завершения я просто json_encode загружаю данные и отвечаю на них.

Теперь, вернувшись в мир javascript, моя UpdateData функция автоматически вызывается и передает данные json.

 function updateData(data) {
    var select = '<select name="sel2">';
    $().each(data, function(index, val){
        select  = '<option name="'  index  '">'  value  '</option>';
    });
    $("#mySel").parent.append(select);
}
  

Это позволило бы мне сгенерировать новый список выбора из возвращенных данных (предполагая, что массив, связанный с ключом / значением, в json).

На самом деле я не тестировал никакого кода, и он предназначен скорее для руководства и псевдокода.

Ответ №2:

Когда пользователь выбирает значение из одного элемента select, отправьте запрос XMLHttpRequest, чтобы получить данные для заполнения второго элемента select.