Question

我遇到jquery-chosen插件无法应用于ajax调用重建的控件的问题。我已经查看了其他建议，但似乎没有找到合适的答案。

我正在使用jquery 3.2.1和jquery-chosen 1.8.2

我的html页面内置于php，首次输出时一切正常 e.g：

<div id="leveldiv">
  <p>
    <label for="fk_level">Level</label>
    <select name="fk_level" class="chosen-select" id="fk_level" title="Level"><option value="0" selected = "selected">None</option>
    </select>
  </p>
</div>

<script type="text/javascript">
  $(".chosen-select").chosen({
    width: "200px"
  });
</script>

在运行时期间，使用ajax调用重建 fk_level选择控件，该调用调用用于初始绘制控件的相同php函数。但是选择的功能会丢失，只会呈现为标准选择框。

在替换包含.trigger("liszt:updated") .trigger("chosen:updated")后，我已同时调用了选择控件的div方法和innerHTML，但这似乎并不是有任何影响。

AJAX控制代码：

function buildLevel() {
  exID = window.document.forms[0].fk_examtype.value;
  sID = window.document.forms[0].fk_subject.value;

  str = "?action=1&exID=" + exID + "&sID=" + sID

  xmlhttp = getHTTPObject();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("leveldiv").innerHTML = this.responseText;
      $("#fk_level").trigger("liszt:updated");
      $("#fk_level").trigger("chosen:updated");
    }
  };
  xmlhttp.open("GET", "ajax.php" + str, true);
  xmlhttp.send();
}

为了完整起见，ajax调用的示例输出是：

<p>
  <label for="fk_level">Level</label>
  <select name="fk_level" id="fk_level" class="chosen-select" title="Level">
    <option value="0">None</option>
  </select>
</p>

我已经花了几天时间来解决这个问题，但是在ajax电话之后无法将所选插件应用于控件。我在Firefox Developer Edition中对此进行了调试，但没有发现javascript错误。

任何帮助都将不胜感激。

标记。

Answer 1

如果未销毁选择框并更改值，则

$("#fk_level").trigger("chosen:updated");有效。如果销毁并重新创建了选择框，则需要重新激活新选择框的插件。因此，在您的AJAX控制代码中，替换

$("#fk_level").trigger("liszt:updated");
$("#fk_level").trigger("chosen:updated");

与

$("#fk_level").chosen({
    width: "200px"
});

Answer 2

我遇到了同样的问题，我使用了下面的示例，并且对我很好

$.ajax(
type: 'POST',
url: 'ApiUrl',
dataType: 'json',
async :false,
    success: function(resultList) {
        for (var item in resultList) {
            if (resultList.hasOwnProperty(item)) {
                $("#selectId").append("<option value=" +
                    resultList[item].value +
                    " id=" +
                    resultList[item].value +
                    ">" +
                    resultList[item].text +
                    "</option>");
            }


        }
        $("#selectId").trigger("liszt:updated");
        $("#selectId").trigger("chosen:updated");
    }
});

AJAX调用后jQuery选择插件更新问题

2 个答案: