上一篇: jquery – HTML选择在同一行或相... 下一篇:jquery-mobile – jquery移动固定...

jquery – Bootstrap Multiselect – 使用插件进行单选,始终选择第一项

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap Multiselect – 使用插件进行单选,始终选择第一项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用 Bootstrap Multiselect 插件从多选下拉列表和单选下拉列表中选择值

我注意到了几个问题并尝试了几个选项,但没有一个可行.如果有人已经解决了,需要建议.

>当使用插件进行单选时,我的第一项始终被选中
>无法更改单个下拉列表的nonSELEctedText文本.

HTML

<SELEct class="multiSELEct">
<option value="cheese">    Cheese     </option>
<option value="tomatoes">  Tomatoes   </option>
<option value="mozarella"> Mozzarella </option>
<option value="mushrooms"> Mushrooms  </option>
<option value="pepperoni"> Pepperoni  </option>
<option value="onions">    Onions     </option>

使用Javascript

$(function() {
$('.multiSELEct').multiSELEct({
        nonSELEctedText: 'check an option!'
    });
});

CSS

.multiSELEct-container input[type=radio] {
   display: none;
}

解决方法

解决方法：

HTML：

<form>

  <input type="text" placeholder="Name...">

  <SELEct class="multiSELEct" size="2">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
  </SELEct>

  <button type="reset">
    Reset
  </button>

</form>

JS：

$('.multiSELEct').multiSELEct({
    nonSELEctedText: 'Choose an option!'
});
$('[type="reset"]').click(function () {
    $('.multiSELEct-SELEcted-text').attr('title','Choose an option!').html('Choose an option!');
    $('.multiSELEct-container li').removeClass('active');
});