jQueryで選択肢のコレクションを取り込む方法は？

Question

概要

私は2回のドロップダウンを使用してフォームを持っています。最初のドロップダウン選択値が変更されると、アプリケーションはAjaxコールを作成して、新しいリストを2番目のドロップダウンに表示させます。

選択した国でフィルタリングされた州/州のリストと考えることができます。

最初のドロップダウンはcountryDropDownで、2番目のドロップダウンは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のレンダリングが、隠れて、ブートストラップにより、私が見る制御がボタンに変更されているように思えます。

したがって、selectに値が設定されても、選択されているものに基づいてこのラッパーボタンを更新することはできません。 :(

現状

現在の動作は、サーバーへのラウンドトリップがうまく機能し、すべてが期待どおりにドロップで更新されることは決してありませんの状態を除いて、ちょうどであるということですダウン。

それでは、どのようにそれを動作させるには？

Answer 1

問題は、新しい「選択肢」の属性/テキストを設定していないことを、それらの機能はまだ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

、ブートストラップのコントロールに含まれる情報データをリフレッシュする必要があります。

さらに、$("#"+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に変更して動作させました。