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

摘要如何在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> 
     "&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呈现而是通过引导隐藏，我看到了控制变为一个按钮。

所以，即使选择得到填充，我不能得到这个包装的按钮更新基于它隐藏的选择内容。 :(

现状

目前的行为是往返于服务器工作得很好，一切都只是预期，除了它永远不会在下拉更新状态下来。

那么如何使工作？

来源

2017-10-13 Will Marcouiller

好吧，从快速浏览我不确定你的ID查找状态下降将在它的前面有'＃'，使它成为一个有效的ID选择器。你要么将它放在onchange调用的字符串中，要么将其附加到填充方法的前面。 – Taplar

你可以在jsfiddle中创建一个例子，以便我们可以玩你的代码？ – rm4

如果你做'console.log（statesDropDown）'它是否返回你期望的对象？ – kyle

问题是，你不设置新的“选择”属性/文本，这些功能仍参考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)

来源

2017-10-13 19:37:52 Himan

由于自举可视控制其不是实际的数据控制的，包含在引导控制的信息数据需要被刷新。

此外，由$("#"+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，并且它的行为。

来源

2017-10-16 15:40:31

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

回答

相关问题