Question

我正在尝试使用multiselect执行自动完成功能。我正在使用http://harvesthq.github.io/chosen/ ..这是很棒的插件，但我需要一些不同的输出方式......

第一，我需要在一个单独的div中显示所选项目。目前它显示在文本框中。第二，我想添加选项全选和全部清除。我看到他们如何在那里添加搜索选项。在那里他们做了js文件

this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>')

所以我认为如果我们可以添加一个带有两个按钮的div选择全部并清除所有然后如果我们可以将功能放在那里以选择所有并清除那么这将是有效的。当我选择全部并清除所有内容时，它也将影响外部div，我想显示所有选择列表。

下面是代码

 <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
      </select>

下面列出选择列表

JS

 var config = {

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

演示http://jsfiddle.net/Gqmhs/

选择文档文件网址http://harvesthq.github.io/chosen/options.html

Answer 1

Buddie，我确实做到了这一点：http://jsfiddle.net/JhRL5/1/
但我很累，现在我不能完成。但我相信这段代码会对你有很大的帮助。

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

    });

});

Answer 2

我已经做了你真正想要的。这是：

[http://jsfiddle.net/JhRL5/16/][1]

首先，从下拉列表中选择一个项目后，文本框立即变为空白。其次，所选项目显示在所有项目（可删除）下的div中：但在这里我被卡住了。如果我选择项目1,3,5，那么它工作正常，但如果我选择1,5,3，它最后一个错误。实际上我需要前进的是，当前选择的项目名称（不是以前选择的项目）。

自动完成与div外的多选

2 个答案: