select2 使用笔记

1.把页面中(可能不在同一个页面，一般都是在列表页界面)的tabindex删掉:

<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，监听方法。

 

 

 

1.Html样例：

<select class="form-control input-sm education"   id="phB02Jmjbxx.education"  name="phB02Jmjbxx.education" data-date="${commonInfo.phB02Jmjbxx.education}">

<option></option>

</select>

 

2.在哪里引入css都行

<link rel="stylesheet" href="<%=basePath%>static/css/select2.min.css" />

 

3.在jq.js引入后添加

<script type="text/javascript" src="<%=basePath%>static/js/common/select2.full.js"></script>

 

<script type="text/javascript">

$(document).ready(function(){

 

//初始化select操作"DM01-02"为代码表分类 "education" 为select 的class

// phB02Jmjbxx.education为页面select元素的id

//纳入慢病管理分类代码-父亲  initclass("DM03-01","medicalhistoryString","phB10JmjzsList[0].medicalhistoryString");

 //DM01-05婚姻状况

 initclass("DM01-05","marriage","phB02Jmjbxx.marriage");

     //民族

 initclass("DM01-01","nation","phB02Jmjbxx.nation");

 //文化程度

 initclass("DM01-02","education","phB02Jmjbxx.education");

 });

</script>

 

 

在项目的personalHealthRecordAdd.jsp页面有示例

那只是示例，记得把它改回到实际需求！

确记确记！！！

貌似多选哪个数据还缺了两个选项（代码表中没有的）

 

Select2关键代码：

/*

 * 代码表数据下拉框初始化

 */

function initclass(codeclass,id,elementid){

 var control = $("."+id);

 $.ajax({                

type: "POST",

dataType:"json", 

data:{codeclass:codeclass,id:id},             

url:[intelligenApp.appRoot,"codeDiction/getcodediction.do"].join(''),            

async: false, 

error: function(yy,zz,xx) {                    

console.log(yy,zz,xx);       

},                

success: function(data) {

try {

var opts = document.getElementById(elementid);

//获取已选值  

var value =opts.getAttribute("data-date");

var aColors = value.split(',');

//alert(aColors);

if(value!=""){

control.empty();//清空下拉列表

control.select2({

  data: data,

  placeholder:'请选择', //默认文字提示

  allowClear: true,//允许清空

     }).val(aColors).trigger('change');//初始化选中的值

}else{

control.select2({

     data: data,

     placeholder:'请选择', //默认文字提示

     allowClear: true,//允许清空

 })

}

control.change();//告诉select2代码已经更新，需要重载

} catch (e) {

// TODO: handle exception

}

        

},

  error:function(boj,info){

        alert(info);

    }, 

    cache: true     

});

   }

 

 

 

 

设置select2初始化值

//获取selectid

var classSelectId = $(".classSelectId").select2();

//设置 value 为four的 option 为选中状态

classSelectId.val(targetuser.classnum).trigger("change");

//告诉select2代码已经更新，需要重载  默认选择有值得第一个

classSelectId.change();