使用 AJAX 初始化 jQuery 多选

Question

我对 AJAX 和 JQUERY 有疑问。

我有一个表格，其中包含一个标签。在 select 一个选项之后，我使用 AJAX 生成一个公式，用数据库中的一些数据填充它并显示它。

问题是我需要用 jQuery 初始化 select 但是当我在生成新内容的文件中调用这个函数时它不起作用：（如果我不使用 AJAX).

<script type="text/javascript">
        $(function(){

            $("#ExampleSelect").multiselect({
                selectedList: 4
            });

        });

</script>

结构如下：

PHP 文件，其主窗体包含一个普通窗体和一个包含 AJAX 调用后生成的元素的窗体。（<select> 中的 onChange 事件）。
Ajax 文件

function LoadDiv()
{

    var xmlhttp;

    var serie_id = document.getElementById('serie_id').value;


    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("divForm").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","divDataManagement.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("serie_id="+serie_id);

}

$.ajax({

         success: function(){
                $("#ExampleSelect").multiselect("destroy").multiselect({
                     selectedList: 4
              });

     }
});

PHP 包含 jQuery UI MultiSelect 的文件，它将显示在主 php 表单中（在 <div> 标签内）。

<select id = "ExampleSelect"  multiple>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                        <option value="option3">Option 3</option>

                </select>

感谢您的帮助。

Answer 1

在AJAX成功方法中初始化它。

$.ajax({
 ...
 success: function(){
      $("#ExampleSelect").multiselect({
           selectedList: 4
      });
 }
...

如果您对多选的选定实例进行更改，请将其销毁并在更改后重新初始化。

$.ajax({
 ...
 success: function(){
    $("#ExampleSelect").multiselect("destroy").multiselect({
         selectedList: 4
  });
 }
...

如果您使用 XMLHttpRequest 而不是 jQuery ajax，您应该在 onreadystatechange 方法中初始化多选。

xmlhttp.onreadystatechange=function()
{
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
       document.getElementById("divForm").innerHTML=xmlhttp.responseText;
       $("#ExampleSelect").multiselect({
             selectedList: 4
       });
     }
}

使用 AJAX 初始化 jQuery 多选

Initialize jQuery Multiselect using AJAX

php

ajax

jquery

jquery-multiselect