необходимо получить значение из базы данных и заполнить раскрывающийся список с помощью jQuery

Question

Мне нужно заполнить выпадающий список, когда я выбираю определенное значение и параметры должны быть запрошены из базы данных.

Можно ли добиться этого с помощью jQuery? Если я могу, пожалуйста, я буду признателен за любую помощь ..

Answer 1

Вы можете сделать это с помощью jQuery и AJAX

jQuery.post('dropdownValues.php', {parameterSentToServer1:'value', param2:'value2'}, function(data){jQuery('#mydropdown option').remove(); //Remove current options
for (var option in data.results){
    jQuery('#mydropdown').append('<option value="'+option.value+'">'+option.name+'</option>');
}}, 'json');

в dropdownValues.php вам нужно будет построить объект json с результатом запроса sql, объект должен быть в этом формате (для хорошей работы с приведенным выше сценарием):

echo '{results:[{value:1, name:'Option1'}, {value:2, name:'Option2'}]};

Answer 2

Обратите внимание, что добавление каждого <option> к <select> перезагрузит DOM для каждого добавления. Это может стать очень медленным, если у вас есть много вариантов. Более эффективно собрать целое <select> с его параметром в строке и затем заменить существующее.

Answer 3

Вы можете определенно достичь этого. Вам нужно использовать AJAX.

Ajax сам по себе является субъектом, но в основном вы будете вызывать функцию javascript, когда из выпадающего списка делается выбор. Функция javascript будет запрашивать страницу с вашего сервера через Ajax, и сервер будет возвращать небольшой кусок данных, который вы затем можете использовать (снова из Javascript) для повторного заполнения второго раскрывающегося списка (или чего-либо еще).

Google вокруг, как сделать Ajax с Jquery. Вот страница, с которой можно начать: http://www.ajaxlines.com/ajax/stuff/article/use_jquery_ajax_to_create_options_in_a_dropdown_menu.php

Answer 4

Относится ли "выпадающий список" к всплывающему меню (например, элемент <select>)? Если это так, вы можете заполнить его следующим образом:

var data = ["Hello World!", 42, true, "Foo"];
var select = document.getElementById("myPopupMenu");

for (var i = 0, l = data.length; i < l; i++)
{
    var option = new Option();
    option.innerHTML = data[i];
    select.appendChild(option);
}

Однако это простой JavaScript - я не уверен, какой будет синтаксис jQuery.

Steve