Question

所以我有这两个jQuery选择菜单，并根据在一个菜单中选择的内容，进行ajax调用以获取下一个选择菜单的数据。我相信我必须迭代数据和列表项，以便在“选择菜单”时填充第二个选项的html。触发第一个选择的事件。我一直在查看选择菜单的结构，我看到两个选项的页面底部的div就像。

<div class="ui-selectmenu-menu ui-front"></div>

当然，有一个选项显示填充的li标签，而另一个只显示一个空的li项目。

我的问题是，一旦我迭代并为第二次选择创建html标记。我如何知道要添加哪个div？两者在最外面的容器（Div）上都有相同的类：ui-selectmenu-menu ui-front

谢谢！

Answer 1

所以我想我不必担心那些Div。我只需要填充选择菜单的选项，然后调用此

$('#city).html(cityOptions);

其中cityOptions是我生成的一系列标签。通过初始化.selectmenu方法然后刷新，页面底部的相对Div会自动更新所有选项，无需担心更新它。

$('#city').selectmenu().selectmenu('refresh', true);

Answer 2

您可以使用selectpicker完成任务。

<select id="city_pickter" class="form-control selectpicker" multiple data-live-search="true">


它允许实时搜索

多选

易于使用

我想你是通过jquery获得每个城市的ID。

// defining array of cities.
var current_cities = [];

// populating cities array
for(var i = 0; i < data.response.cities.length; i++){

    current_cities.push(Number(data.response.cities[i].city_id));
}

$('#city_picker').selectpicker('val', current_cities);

如果您想取消选择所有内容。你可以使用

$('#city_picker').selectpicker('val', '[]');

上述代码工作所需的JavaScript和CSS文件是

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

jQuery UI填充数据库中的选择菜单

2 个答案: