如何在jQuery中填充选择选项集合?
问题描述:
我有使用两个下拉列表的形式。一旦第一个下拉选择值发生变化,应用程序就会进行Ajax调用,以便在第二个下拉列表中显示新列表。
将其视为在选定国家/地区过滤的州/省份列表。
第一个下拉菜单是countryDropDown,第二个下拉菜单是statesDropDown。
代码示例
JSP
<html:select name="countries"
property="countryName"
indexed="true"
onchange="onCountryChange(this, 'states${index}')">
<html:optionsCollection name="myViewModel" property="countries" />
</html:select>
<html:select styleId="states${index}"
name="states"
property="name"
indexed="true">
<html:optionsCollection name="myViewModel" property="states" />
</html:select>
的Javascript
function onCountryChange(countriesDropDown, statesDropDownId) {
var country = $(countriesDropDown).val();
$.ajax({
type: 'POST',
url: makeURL('/ent/refreshStates.do'),
async: false,
data: "country:" + country,
success: function(states) {
populate(statesDropDownId, states);
},
failure: function(e) {
showAlert(e);
}
});
}
// In the following function, states is a list of ListValueBean.
function populate(statesDropDownId, states) {
var statesDropDown = $(statesDropDownId);
statesDropDown.empty();
for(var i=0; i<states.length; i++) {
statesDropDown.append("<option></option>")
.attr("value", states[i].value)
.text(states[i].label);
}
}
渲染HTML
<select name="states[0].state" id="states0" data-size="10" style="display: none;">
<option value="5052">MO</option>
<option value="5051" selected="selected">CA</option>
...
</select>
<div class="btn-group boostrap-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="states0" title="5051">
<span class="filter-option pull-left">CA</span>
" "
<span class="caret">::before</span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li rel="0" class="selected">
<a tabindex="0" class style>
<span class="text">CA</span>
<i class="glyphicon glyphicon-ok icon-ok check-mark"></i>
</a>
</li>
</ul>
</div>
</div>
这似乎是select
呈现而是通过引导隐藏,我看到了控制变为一个按钮。
所以,即使选择得到填充,我不能得到这个包装的按钮更新基于它隐藏的选择内容。 :(
现状
目前的行为是往返于服务器工作得很好,一切都只是预期,除了它永远不会在下拉更新状态下来。
那么如何使工作?
答
问题是,你不设置新的“选择”属性/文本,这些功能仍参考statesDropDown
statesDropDown.append("<option></option>")
.attr("value", states[i].value)
.text(states[i].label);
它改变这一点,
var opt = $("<option></option>").attr("value", states[i].value).text(states[i].label);
statesDropDown.append(opt)
答
由于自举可视控制其不是实际的数据控制的,包含在引导控制的信息数据需要被刷新。
此外,由$("#"+statesDropDownId)
返回的控件实际上并不会返回预期的控件,因为我未知的一些黑暗原因。我发现正在工作的解决方法如下。
function assignStatesToDropDown(statesDropDownId, states) {
var statesDropDown = $("#"+statesDropDownId)[0];
statesDropDown.innerHTML = "";
$.each(states, function(index, state) {
var option="<option value='"+state>+"'>"+state+"</option>";
var html=statesDropDown.innerHTML+option;
statesDropDown.innerHTML=html;
});
refreshBootstrapDropDownsData();
}
function refreshBootstrapDropDownsData() {
$(".selectpicker").selectpicker("refresh");
}
这工作得很好。
此外,我只需要一个字符串列表,所以我没有返回List,而是将返回类型更改为List,并且它的行为。
好吧,从快速浏览我不确定你的ID查找状态下降将在它的前面有'#',使它成为一个有效的ID选择器。你要么将它放在onchange调用的字符串中,要么将其附加到填充方法的前面。 – Taplar
你可以在jsfiddle中创建一个例子,以便我们可以玩你的代码? – rm4
如果你做'console.log(statesDropDown)'它是否返回你期望的对象? – kyle