标签: select2

我试图在打开时更改选择2版本4的边框颜色:

.select2-dropdown--above {
    border: 1px solid blue !important;;
    border-bottom: none !important;  

}

.select2-dropdown--below{
    border: 1px solid blue !important;;
    border-top: none !important;     

}

代码:http://jsfiddle.net/7c0Lm033/

这是我得到的:

如你所见,我无法改变选择2头颜色的颜色.我找不到任何可以改变标记颜色边框的独特选择器.

我有以下代码:

$("#select2").select2({ closeOnSelect: false,
                        maximumSelectionLength: 5,
                        ...  // I have AJAX implemented here
                      });

当我closeOnSelect要false和有maximumSelectionLength集,我可以没有任何问题,选择超过5个项目.当我点击下拉列表同时选择了超过5个项目并尝试添加另一个项目时,我收到消息"您只能选择5个项目".

是否有任何变通方法让这两个属性一起工作而不会发生冲突？

我目前正在使用Select2 4.0.1.

更新:

我接受了pratikwebdev的建议,并添加了以下代码:

$("#select2").select2({ closeOnSelect: false,
                        maximumSelectionLength: 5,
                        ...  // I have AJAX implemented here
}).on("change", function(e) {
    if(e.target.length == 5) {
        $("#select2").select2({closeOnSelect: true,
                               maximumSelectionLength: 5,
        });
    }
});

这实际上将在我选择5个项目后关闭下拉列表,并且该maximumSelectionLength属性将正常工作.但现在closeOnSelect确实如此,所以每当我选择一些东西时,下拉菜单就会关闭.

有没有办法切换closeOnSelect？

我在新版本4.0中遇到了这个问题，但直到我自己经过数小时的工作后解决后，才找到任何答案。

我正在使用Select2来设置我的选择框并添加功能,我想知道如何使搜索规则更加宽松.目前,如果我在下拉列表中有"新墨西哥",我可以搜索"墨西哥"或"新墨西哥"以匹配选择选项,但如果我输入"mexico new",我会"找不到结果".有没有办法扩展搜索功能以匹配搜索词,无论他们的顺序如何？

$(document).ready(function() {
  $(".states").select2();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="states" style="width: 50%">
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="TB">Tshirt, Black</option>
</select>

我正在使用 select2 js 我只是使用默认功能，但默认搜索框显示为禁用模式。我无法在其中输入任何内容。

我的代码是

<select id="type" name="type" class="form-control select2-use">
    <option value="">select type</option>
    <option value="U">User</option>
    <option value="A">Admin</option>
</select>

$('.select2-use').select2({
    placeholder: "Select",
    allowClear: true
});

我在我的 HTML 页面中包含了 select2.min.css 和 select2.min.js。

没有js错误。

我在 Bootstrap 模态 div 中使用它，我在其中加载了一个 HTML 页面

$(document.body).on('change','.product-dropdown',function(){
   var selectVaule = $(this).val();
   if(selectVaule){
      alert(selectVaule+ 'select');
   }
});

上面的代码返回数组中的所有选定值.我只想在多个选择2上获得最新的点击值.

任何人都可以让我知道以下代码有什么问题： HTML

<div class="form-wrapper">
         <div class="form-repaet">
          <div class="form-group">
            <select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
              <option selected="selected">Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2" name="book[0].is" style="width: 100%;">
              <option selected="selected">is</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>
          <div class="form-group">
            <select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
              <option selected="selected">Select a Tag</option>
              <option>1</option>
              <option>2</option>
            </select>
          </div>

          <div class="form-group">
           <div class="btn-group m-r"> 
             <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"> 
              <span class="dropdown-label"><i class="ion-gear-b"></i></span> 
             </button> 
             <ul class="dropdown-menu dropdown-select"> 
              <li class="active">
               <a href="#">All</a>
              </li> 
              <li><a href="#">Option2</a></li> 
              <li><a href="#">Option3</a></li>  
             </ul> …

我的 select2 不工作。它只是显示多个选择框

<form action="">
<select class="js-example-basic-multiple" multiple="multiple">

<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>

<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>

<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>

  </select>
</form>
<script type="text/javascript">
                $(".js-example-basic-multiple").select2();
</script>

控制台中的错误：Uncaught TypeError: $(...).select2 不是 HTMLDocument 中的函数。

JS小提琴：

https://jsfiddle.net/y6ogss94/