JQuery Chosen根据会话值动态更新数据

时间:2013-11-22 11:29:25

标签: jquery ajax jquery-chosen

我使用了JQuery选择的选择框并选择了需要动态更新的数据。我试图以某种方式解决它

<select
  title="Select your Area"
  data-placeholder="Select Your Area"
  style="width: 200px; float: left; height: 36px;"
  class="chosen-select-deselect" form="searcharea" id="sltarea"
  name="area">

  <div th:each="area,rowStat : ${session.areas}" th:remove="tag">
    <option
      th:if="${#strings.equals(session.searcharea,area.areaName)}"
      selected="selected" th:text="${area.areaName}"
      th:value="${area.areaName}"
      th:attr="data-lat=${area.lat},data-lng=${area.lng},data-city=${area.cityName}">         
    </option>

    <option
      th:unless="${#strings.equals(session.searcharea,area.areaName)}"
      th:text="${area.areaName}" th:value="${area.areaName}"
      th:attr="data-lat=${area.lat},data-lng=${area.lng},data-city=${area.cityName}">      
    </option>
  </div>
</select>

每当“区域”数据在会话中发生变化时,我想用新区域值刷新选择的选择框

我使用jquery触发了以下代码但未更新

$(".sltarea").trigger("chosen:updated");

1 个答案:

答案 0 :(得分:1)

我解决了我的问题,正如jsfiddle

中所解释的那样

<强> HTML

                  <li>
            <label for="progetto">Progetto</label>
            <select name="progetto" id="progetto" data-placeholder="Tipo di progetto" style="width:210px;" class="chzn-select" tabindex="4">
              <option value="">Scegli...</option>
              <option value="sito">Sito Web</option>
              <option value="fotoritocco">Fotoritocco</option>
              <option value="fotodvd">Foto DVD</option>
              <option value="altro">Altro</option>              
            </select>
          </li>

          <li>
            <label for="budget">Budget</label>
            <select name="budget" id="budget" data-placeholder="Budget" style="width:210px;" class="chzn-select" tabindex="5">
              <option value="">--</option>                  
                  <option value="1000" class="sito">€ 1000</option>
                  <option value="2000" class="sito">€ 2000</option>
                  <option value="3000" class="sito">€ 3000</option>
                  <option value="50" class="fotoritocco">€ 50,00</option>
                  <option value="100" class="fotoritocco">€ 100,00</option>
                  <option value="200" class="fotoritocco">€ 200,00</option>
            </select>
          </li>

<强>脚本

$(function() {
$("#budget").chained("#progetto"); 
//refresh#budget's chosen to reflect changes made with "chained"
$("#budget").trigger("liszt:updated");

$("#progetto").bind("change", function(){
    //every time $progetto change, resfresh #budget's chosen
    $("#budget").trigger("liszt:updated")
});});

外部资源 link