select2 搜尋下拉框的用法

首先添加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，監聽方法。