下拉多选select2

方式一

<script type="text/javascript" src="/wd/js/jquery-1.9.1.js" ></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

js

<script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
	</script>

html

<select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 250px">
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
				<option value="D">D</option>
			</select>

方式二

js

<script>
        $(document).ready(function() {
       		var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
			$("#c01-select").select2({
				data: data,
				placeholder:'请选择',
				allowClear:true,
				multiple: true  //启用多选
			})
        });
	</script>

html

<select id="c01-select" style="width: 250px">
			</select>

方式三（远程获取数据）

后台

@ResponseBody
	@RequestMapping(value = "test",method = RequestMethod .GET,produces="text/html;charset=UTF-8;")
	public String test(HttpServletResponse response, HttpServletRequest request){
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");

			String data = "var selectData = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]";

			return data;
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "";
		}
	}

通过js获取数据

<script src="/wd/toupiao/test"></script>

渲染html

<script>
        $(document).ready(function() {
            /*$.ajax( {
                url : '/wd/toupiao/test',
                type:'Post',
                dataType : 'json',
                success : function(a) {
                    selectData = a;
                }
            });*/
       		//var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
			$("#c01-select").select2({
				data: selectData,
				placeholder:'请选择',
				allowClear:true,
				multiple: true  //启用多选
			})
        });
	</script>

html

<select id="c01-select" style="width: 250px">
			</select>