下拉框——多选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>

html

<form action="/ModelTest1/test/add" method="post">
    <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>
    <input type="submit" name="提交"/>
</form>

js

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

java

@ResponseBody
    @RequestMapping(value = "add",method = RequestMethod .POST)
    public String upload(HttpServletRequest request,String[] states) throws Exception{
        String json = JSON.toJSONString(states);
        for (String state:states){
            System.out.println(state);
        }
        return json;
    }

 

方式二

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

<form action="/ModelTest1/test/add" method="post">
    <select id="c01-select" name="states" style="width: 250px">
    </select>
    <input type="submit" name="提交"/>
</form>

方式三（远程获取数据）

后台

@ResponseBody
    @RequestMapping(value = "getData",method = RequestMethod .GET,produces="text/html;charset=UTF-8;")
    public String getData(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="/ModelTest1/test/getData"></script>

渲染html

<script>
    $(document).ready(function() {
        $("#c01-select").select2({
            data: selectData,
            placeholder:'请选择',
            allowClear:true,
            multiple: true  //启用多选
        })
    });
</script>

html

<form action="/ModelTest1/test/add" method="post">
    <select id="c01-select" name="states" style="width: 250px">
    </select>
    <input type="submit" name="提交"/>
</form>