简体   繁体   中英

jQuery autocomplete multiple values from selectbox

I am using the following code to setup autocomplete to my web application. Everything works fine in jsfiddle and here is the link 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

 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

#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.

Please check my website link at 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.

Any help is appreciated.

It started working after placing the script in different position. Must be jquery conflict.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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