Jquery Chosen Select 插件在 PHP Ajax 响应中不起作用答案

【问题标题】：Jquery Chosen Select plugin doesn't Work in PHP Ajax responseJquery Chosen Select 插件在 PHP Ajax 响应中不起作用
【发布时间】：2014-12-27 10:57:18
【问题描述】：

我有两个选择框用于从 MYSQL DB 中获取值

当 No-1 选择框发生变化时，No-2 选择框从 AJAX 响应中生成。

在 No-1 中选择的插件完美运行。但是当从 ajax 生成 No-2 选择框时，选择的插件在 No-2 选择框中不起作用。

Main.PHP

         <div class="control-group">
          <label for="textfield" class="control-label">Category<span>*</span></label>
              <div class="controls">
              <select name="category" id="category" multiple="multiple" class="chosen-select input-medium" required onchange="showSubCat(this.value)">
                <option value='1'>Option 1</option>
                <option value='2'>Option 2</option>
              </select>
              <input type='hidden' value='' id='categoryId' name='categoryId'>
             </div>
            </div>  

            <div class="control-group">
              <label for="textfield" class="control-label">Sub Category</label>
              <div class="controls">
              <select name="subCat_2" id="subCat_2" multiple="multiple" class="chosen-select input-large">
                <option value="">--- Select Sub Category---</option>
              </select>
             </div>
            </div>

JS 代码：

var xmlhttp;
        function showSubCat(str){

            if( $('#category :selected').length > 0){
            //build an array of selected values
            var selectednumbers = [];
            $('#category :selected').each(function(i, selected) {
                selectednumbers[i] = $(selected).val();
            });
            }
            //alert(selectednumbers);   
            document.getElementsByName('categoryId')[0].value = selectednumbers;
            if (str==""){
                document.getElementById("subCat_2").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;
                    //alert(xmlhttp.responseText);
                    console.log(xmlhttp.responseText);
                }
            }
            xmlhttp.open("GET","MYurl.php?catId="+selectednumbers,true);
            xmlhttp.send();
        }

AJAX.PHP

echo "<option value=''>--- Select Sub Category --- </option>";


        $sql="SELECT field FROM tableName WHERE condition;
        $result = mysql_query($sql) or die('MySql Error' . mysql_error());
        while($row = mysql_fetch_array($result)){

            echo "<option value='1'> ----- Sub Option 1</option>";


}

让我知道我做错了什么......？？

【问题讨论】：

你的问题不清楚。根据我的理解，您已经向两个选择框添加了一些插件，但该插件不适用于选择框-2。如果这是问题，那么它是由于插件未绑定到选择框-2，因为它是动态生成的。加载数据后尝试在选择框 2 上调用插件。
我也将插件类 'chosen-select' 称为选择框 2
如果你使用 jQuery，为什么不使用 jQuery 的 $.ajax？
您能在此处添加您用于插件调用的代码吗？

标签： php jquery ajax select jquery-chosen

【解决方案1】：

假设您在第二个列表中选择调用，请尝试使用

$('#subCat_2').trigger('chosen:updated');

更新其列表后。

如果您查看plugin page，则表明

`您可以在原始选择字段上触发多个事件来调用选择中的行为。

chosen:updated 只要 Chosen 的底层选择元素发生变化（例如选定选项的变化），就会触发此事件。`

【讨论】：

【解决方案2】：

您需要使用其中的新数据重建选择框。

            if (xmlhttp.readyState==4 && xmlhttp.status==200){

                // bind new data
                document.getElementById("subCat_2").innerHTML=xmlhttp.responseText;

                // refresh chosen.
                $('#subCat_2').trigger("chosen:updated");
            }

【讨论】：