一泓清波

select2 常用方法

2019/06/17

select2插件 实现了下拉查询的功能, 带来了更加友好的交互方式

select 格式成 select2

$("#id").select2({ allowClear: true, placeholder: '查询下拉框'  });

获取值

$("#id").select2('val');

获取text

$("#id").select2('data')[0].text

获取属性值 例如 title

$("#id").select2('data')[0].title

赋值

$("#id").val("0").select2();

下拉选择事件

$("#id").change(function () { 
	var value=  $("#id").select2('val');
});

模拟下拉选择事件

$("#dayType").change();

多选 multiple

<select class="form-control" id="way" multiple="multiple"
							style="width: 200px; display: inline">
	<option value="1">AA</option>
	<option value="2">BB</option>
	<option value="3">CC</option>
</select>
$('#way').select2({width: 200 + "px", placeholder: "点击输入框，可以多选"});

多选取值

var ids =[];
var map ={};
var obj = document.getElementById('id');
	var options = obj.options;
	for (var i = 0; i < options.length; i++) {
		var ss = options[i].selected;
		if (options[i].selected) {
			//var  jsonstr='{"value":"'+options[i].value+'","text":"'+options[i].text+'"}';
			ids.push(options[i].value);
			map[options[i].value] = options[i].text;
		}
	}

多选赋值

$('#gateway').val(['1','2']).trigger('change');