Question

摘要

我有一个使用两个下拉菜单的表单。一旦第一个下拉选择值发生更改，应用程序将进行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>
        "&nbsp;"
        <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已呈现但被引导程序隐藏，我看到的控件已更改为按钮。

因此即使选择了填充，我也无法根据它隐藏的选项中的内容来更新此包装器按钮。：（

当前状态

目前的行为是，到服务器的往返工作正常，一切都和预期的一样，除了在下拉列表中永远不会更新的状态。

那么如何让它发挥作用呢？

Answer 1

问题是您没有设置新＆＃34;选项＆＃34;的属性/文本，这些函数仍然引用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)

Answer 2

由于Bootstrap可视控件不是实际的数据控件，因此需要刷新Bootstrap控件中包含的信息数据。

此外，$("#"+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并且它表现得很好。

如何在jQuery中填充选择选项集合？

2 个答案: