需要从数据库中获取值并使用 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 中，您需要使用 sql 查询的结果构建一个 json 对象，该对象必须采用这种格式（以便与上述脚本配合使用）：

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

Answer 2

“下拉列表”是指弹出菜单（例如<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 语法是什么。

史蒂夫

Answer 3

请注意，将每个 <option> 附加到 <select> 将重新加载每个附加的 DOM。如果您有很多选择，这可能会变得非常慢。 使用字符串中的选项构建整个<select>，然后替换现有的，效率更高。

Answer 4

你绝对可以做到这一点。您需要使用 AJAX。

Ajax 本身就是一个主题，但基本上您要做的就是在从下拉列表中进行选择时调用 javascript 函数。 javascript 函数将通过 Ajax 从您的服务器请求一个页面，服务器将返回一小块数据，然后您可以使用（再次从 Javascript）重新填充第二个下拉列表（或其他）。

Google 搜索如何使用 Jquery 进行 Ajax。这是一个可以帮助您入门的页面：http://www.ajaxlines.com/ajax/stuff/article/use_jquery_ajax_to_create_options_in_a_dropdown_menu.php