select2 搜索下拉框的用法

最新推荐文章于 2021-03-09 08:59:31 发布

李意文

最新推荐文章于 2021-03-09 08:59:31 发布

阅读量1w

点赞数

分类专栏： web前端文章标签：搜索下拉框 web前端 select2 搜索下拉框

本文链接：https://blog.csdn.net/u014698348/article/details/51956201

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先添加https://select2.github.io/dist/css/select2.min.css

和https://select2.github.io/dist/js/select2.full.js

再select变现添加 js-example-basic-single class。

在添加这个srcipt

<script type="text/javascript">
    $(document).ready(function() {
        $(".js-example-basic-single").select2();
    });
</script>

则形成一个可以搜索的select。

使用select2的几个问题及解决。

一、要使select选中某个元素，要使select选中four，$("#ddd").val("four");不能起作用，<select id="ddd">
  <option value="one">First</option>
  <option value="two">Second (disabled)</option>
  <option value="three">Third</option>
  <option value="four">four1111111</option>
  <option value="five">five2222222222</option>
  <option value="six">six66666666</option>
</select>
可以使用如下方法：
var $ddd = $("#ddd").select2();
$ddd.val("four").trigger("change");
二、在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.

解决方法:
1、
把页面中的  tabindex="-1"  删掉:
 
 
  
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div><div class="modal-body" style="max-height: 800px">
 
 
 
 
  
  <div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div><div class="modal-body" style="max-height: 800px">
 
 
2.
重写enforceFocus方法:
 
 
  
  $.fn.modal.Constructor.prototype.enforceFocus = function() {};
  
  
  
  三、用了select2，则select的不能执行onclick，监听方法。