取消选择 <select> 中的顶部选项 - 引导多选答案

【问题标题】：Deselect top option in <select> - bootstrap multiselect取消选择 <select> 中的顶部选项 - 引导多选
【发布时间】：2016-03-23 06:36:05
【问题描述】：

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

我已经尝试了通过引导多选内置功能和选项完成的所有操作。什么都行不通。所以我求助于 vanilla javascript 或 vanilla jquery 直接进入纯 html 并取消选择第一个选项。

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

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

我试过这个：

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

而且它不起作用。它会删除活动类，但不会取消选择该选项。如何取消选择该选项？

我试过这个：

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

它不会取消选择该选项。

请查看是否可以取消选择选择的顶部选项。

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

将插件用作<select multiple=true> 时，默认情况下不会选择顶部选项。但是我需要与普通<select> 相同的行为

【问题讨论】：

这个有codePen还是jsFiddle
@SridharGudimela jsfiddle.net/bkzb272j/181 谢谢
我尝试在您的 jsfiddle 的第 38 行的每个选项中添加 selected='false' ，实际上未选择第一个选项。但是它选择了最后一个。将尝试更多，看看是否有更好的方法来取消选择所有内容或使用 selectedIndex = -1。
这里的第一个例子似乎符合你的要求..davidstutz.github.io/bootstrap-multiselect/#further-examples

标签： javascript jquery html html-select bootstrap-multiselect

【解决方案1】：

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

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

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

        $("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。

【讨论】：

谢谢。我的网站中已经有一些不默认选择选项的多选。对不起，我应该在问题中提到这一点。我也需要一些单选，默认情况下他们不应该选择一个选项，以便与多选保持一致。插件使他们的多选和单选不一致，这似乎很奇怪。
好的，有一种方法可以实现你想要的，但是你的小提琴有很多错误我认为它打破了我的逻辑，无论如何我会在这里添加代码，看看你是否可以让它工作你的结局。
我使多选的行为类似于单选。这是工作的 jsfiddle：jsfiddle.net/bkzb272j/199
@Beniamino_Baggins 不错

【解决方案2】：

我已经重新定义了“取消选择”的方法，如下所示。

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

JsFiddle Demo

【讨论】：

【解决方案3】：

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

【讨论】：