简体   繁体   English

jQuery从选择框自动完成多个值

[英]jQuery autocomplete multiple values from selectbox

I am using the following code to setup autocomplete to my web application. 我正在使用以下代码来设置我的Web应用程序的自动完成功能。 Everything works fine in jsfiddle and here is the link http://jsfiddle.net/JhRL5/1/ 在jsfiddle中一切正常,这是链接http://jsfiddle.net/JhRL5/1/

 <select data-placeholder="Your Favorite Types of Bear" data-role="none" multiple class="chosen-select-width" tabindex="16" id="test">
        <option value="" disable></option>
        <option value="3">American Black Bear</option>
        <option value="4">Asiatic Black Bear</option>
        <option value="5">Brown Bear</option>
        <option value="6">Giant Panda</option>
        <option value="7">Sloth Bear</option>
        <option value="8">Sun Bear</option>
        <option value="9">Polar Bear</option>
        <option value="10">Spectacled Bear</option>
      </select>

Javascript Java脚本

 var config = {
      '.chosen-select-width'     : {width:"75%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

$(document).ready(function(){

    $("#test").change(function(){
        var a = $("#test :selected").text();
        $("#selectedlist").html(a);
    });

    $("#s-all").click(function(){

        var a = $("#test option");

        $.each( a, function( i, val ) {
            $(val).change();
        });

        var b = $("#test option").text();
        $("#selectedlist").html(b);

    });

    $("#c-all").click(function(){

        $("#test option:selected").removeAttr("selected");

        var a = $("#test :selected").text();
        $("#selectedlist").html(a);
        $(".chosen-choices").find("li.search-choice").remove();

    });

});

CSS 的CSS

#selectedlist { border: solid 1px #eee; margin-top:20px; padding:10px}
#selectedlist span{width: 100%; float: left;}

Please refer to the jsfiddle link and everything seems working fine in the jsfiddle but the same code not working in my website. 请参考jsfiddle链接,所有内容在jsfiddle中似乎都可以正常运行,但相同的代码在我的网站中不起作用。

Please check my website link at http://20percents.tk/backend/extra-pages/test1/ 请检查我的网站链接,网址为http://20percents.tk/backend/extra-pages/test1/

I tried setting up the CSS property as select.not('test1') also but still it didn't work. 我也尝试将CS​​S属性设置为select.not('test1')但仍然无法正常工作。

Any help is appreciated. 任何帮助表示赞赏。

It started working after placing the script in different position. 将脚本放置在其他位置后,它开始工作。 Must be jquery conflict. 必须是jquery冲突。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM