select2.js使用

<div class="form-group">
<label class="col-md-4 control-label">职位 <span
class="required">*</span>
</label>
<div class="col-md-4">
<select id="authority" name="authority" multiple="multiple" class="form-control">
<option></option>
</select>
</div>
</div>



赋值
var aothorityIds = aothorityId.split(",");//要赋值的字符串
console.log(aothorityIds);
var aothorityNames = aothorityName.split(",");//转为数组
console.log(aothorityNames);
var objJson = [];//构造数据
for(var i=0;i<aothorityIds.length;i++){
objJson.push(jQuery.parseJSON('{"id":"'+aothorityIds[i]+'", "text":"'+aothorityNames[i]+'"}'));//构造json字符串并存入数组objJson
}
$("#authority").select2("data", objJson);//给下拉框赋值

console.log(JSON.stringify(objJson));//将json数据转为字符串

<div class="form-group">
										<label class="control-label col-md-4">城市</label>
										
										<div class="col-md-8">
											<select id="appCityCode" name="appCityCode" class="form-control select2" multiple="multiple" >
												<option></option>
											</select>
										</div>
									</div>

//select查找匹配（matcher)
var ComponentsDropdowns = function () {

    var handleSelect2 = function () {
        $('#appCityCode').select2({
            placeholder: "请选择城市",
            allowClear: true,
            matcher: function(term, text, opt) {
            	return text.toUpperCase().indexOf(term.toUpperCase())>=0
                || opt.attr("shortNm").toUpperCase().indexOf(term.toUpperCase())>=0;
        	}
        });

        function format(state) {
            if (!state.id) return state.text; // optgroup
            return "<img class='flag' src='" + Metronic.getGlobalImgPath() + "flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
        }
      
        function movieFormatResult(movie) {
            var markup = "<table class='movie-result'><tr>";
            if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
                markup += "<td valign='top'><img src='" + movie.posters.thumbnail + "'/></td>";
            }
            markup += "<td valign='top'><h5>" + movie.title + "</h5>";
            if (movie.critics_consensus !== undefined) {
                markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
            } else if (movie.synopsis !== undefined) {
                markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
            }
            markup += "</td></tr></table>"
            return markup;
        }

        function movieFormatSelection(movie) {
            return movie.title;
        }

    }   

    return {
        init: function () {            
            handleSelect2();
            saleSelect2();
            citySelect2();
        }
    };
}();

参考网址http://ivaynberg.github.io/select2/#minimum

评论

3 楼 lihaiming 2015-02-06  

影非弦 写道

没有这个页面详细的文件么？

文档地址：https://select2.github.io/

2 楼 影非弦 2015-02-06  

没有这个页面详细的文件么？

1 楼 影非弦 2015-02-06  

这个select.min.css是select2提供的样式文件么？