取消选择 <select> 中的顶部选项 - bootstrap 多选

Question

我有一个 bootstrap multiselect html 元素，我用来自网络服务调用的数据填充该元素，该网络服务调用获取新西兰的区域列表。默认情况下，我需要将这些选项加载到 <select> 而不是 select 顶部选项。

我已经尝试了通过 bootstrap multiselect 内置函数和选项 完成的所有操作。什么都行不通。所以我求助于香草 javascript 或香草 jquery 直接进入平原 html 和 deselect 第一个选项。

这方面的所有工作都可以在 this jsfiddle

中完成

我不得不将缩小的外部资源 (xml2json.min.js) 复制粘贴到 javascript 编辑器的顶部，因为当我尝试将其添加为外部资源时它播放效果不佳。

我试过这个：

$("ul.multiselect-container").find("li").removeClass("active");

而且它不起作用。它删除了活动的 class 但没有删除 select 选项。我如何取消select选项？

我试过这个：

$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);

它没有取消select选项。

请看看你能不能去掉selectselect的最上面的选项。

所以 url 处的 jsfiddle 与上面相同但以 182 结尾是我的重构，试图让人们更容易理解，但它并没有在我朋友的笔记本电脑上正常工作。

将插件用作 <select multiple=true> 默认情况下，它不会 select 顶部选项。但是我需要与正常 <select>

相同的行为

Answer 1

在 select 元素的顶部添加一个空选项。

Answer 2

我刚刚查看了插件，这是我的理解，To remove default selection 你必须将 selection 设置为 multiple='multiple' ，此时您可以在下拉列表中看到复选框而不是单选按钮。

如果您不设置此多个选项，那么您最终会得到一个单选按钮，这将默认设置第一个值。这是 Fiddle which doesnt not select any default 值。我刚刚将选项 multiple='multiple' 添加到您的动态 select 标签。

要设置选项 multi select 并且一次只能 select 一个，请使用以下代码。您需要用这个替换您的代码块

        $("body").prepend("<select id=\"a-select\" multiple='multiple' >"             
        + optionsText +
        "</select>");

        $('#a-select').multiselect({
        on: {
            change: function(option, checked) {
                alert('sdd');
                var values = [];
                $('#a-select').each(function() {
                    if ($(this).val() !== option.val()) {
                        values.push($(this).val());
                    }
                });

                $('#a-select').multiselect('deselect', values);
            }
        }
    });

取自 http://davidstutz.github.io/bootstrap-multiselect/#further-examples 的逻辑，请参阅此处的第 5 个示例 Simulate single selections using checkboxes。

Answer 3

我重新定义了方法 "deselect" 如下。

 this.deselect = function() {
      $('input[type="radio"]:checked').attr('checked', false);
     $(".multiselect-selected-text").text("None selected");
  }

JsFiddle Demo

取消选择 <select> 中的顶部选项 - bootstrap 多选

Deselect top option in <select> - bootstrap multiselect

javascript

jquery

html

html-select

bootstrap-multiselect