Javascript jQuery从selectbox自动完成多个值

我正在使用以下代码设置web应用程序的自动完成。在JSFIDLE中一切都很好，下面是链接

CSS

请参考jsfiddle链接，在jsfiddle中一切似乎都正常工作，但在我的网站中没有相同的代码

请查看我的网站链接

我尝试将CSS属性设置为select。也不是'test1'，但仍然不起作用

---

非常感谢您的帮助。

在将脚本放置到不同位置后，它开始工作。必须是jquery冲突。

这可能是由于在实际站点上加载页面时发生的错误，TypeError:a在{main，places}.js中为null。有时单独脚本中的错误会导致其他JS停止工作。是的，你是对的，一旦我将脚本稍微向上移动，就可以修复它。

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

 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();

    });

});

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