微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我有两个选择的选择框用于从MysqL DB获取

当No-1 Select框改变时,No-2选择框从AJAX响应生成.

No-1中的Chosen插件完美运行.但是当从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>";


}

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

解决方法:

假设您在第二个列表中选择了呼叫,请尝试使用

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

更新其列表后.

如果你看一下plugin page就表明了这一点

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

selected:updated每当选择的基础选择元素发生更改(例如所选选项中的更改)时,应触发此事件

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐