使用select2实现本地或者ajax动态查询

最新推荐文章于 2023-11-20 12:01:13 发布

原创最新推荐文章于 2023-11-20 12:01:13 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#select2 #ajax #jquery #远程

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍如何使用Select2插件实现物料名称的下拉选择功能，包括本地数据加载和Ajax动态加载方式，以及数据回显的实现过程。

效果：

1、插件引用

<link rel="stylesheet" type="text/css" href="resource/js/public/select2.4.0.6/css/select2.css"/>
	 <script type="text/javascript" src="resource/js/public/select2.4.0.6/js/select2.full.js"></script>

2、2、html代码

<th width="10%">物料名称</th>
	<td colspan="2">
		<select class="select" id="material_name">
			<option value="">--请选择--</option>
		</select>
	</td>

3、js代码
1>本地

	 $(document).ready(function () {
        //ajax调用时开启
        toLoadmaterial()  
        //本地示例
        var data =[
            {"id":1,"text":"菠菜"},
            {"id":2,"text":"鸡蛋"},
            {"id":3,"text":"猪肉"}]
        $("#material_name").select2({
            data: data,
            placeholder: '请选择',//默认文字提示
            language: "zh-CN",//汉化
            allowClear: true//允许清空
        });
  
    })

2>ajax

 function toLoadmaterial() {
            var enterprise_id = $("#enterprise_id").val()  ;
            $("#material_name").select2({
                ajax: {
                    url : 'billQuery.do?method=toMaterialSelect',
                    headers: {
                        'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    async: true,
                    contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                    dataType : 'json',
                    type : 'post',
                    data : function (params) {
                        return {
                            enterprise_id : enterprise_id,
                            perName : params.term    //接收搜索框输入的姓名
                        };
                    },
                    processResults: function (data) {        //data返回数据
                        var options = new Array();
                        console.log(data);
                        if (data.status == "success") {
                            $(data.data).each(function(i, o) {
                                options.push({　　　　　　　　　　//获取select2个必要的字段，id与text
                                    id : o.id,
                                    text : o.text
                                });
                            });
                            return {
                                results: options        //返回数据
                            };
                        }else{
                            alert(data.msg);
                        }
                    },
                    cache: true
                },
                placeholder: "输入名称或编码搜索...",
                allowClear: true,    //选中之后，可手动点击删除
                escapeMarkup: function (markup) { return markup; }, // 字符转义处理自定义格式化防止xss注入
                formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
                formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
            });
    }

4、ajax接口代码

    @RequestMapping(params = "method=toMaterialSelect")
	@ResponseBody
	public String toFoodSelect(HttpServletRequest request,
							   @RequestParam Map<String, Object> params) {
		try {
			List<Map<String, Object>> list = new ArrayList<>();
			System.out.println(params.get("enterprise_id").toString());
			String perName ="b";
			if(params.get("perName")!=null){
				perName = params.get("perName").toString();
			}
			System.out.println(perName);
			if(perName.equals("a")){
				Map<String,Object> map1 = new HashMap<>();
				map1.put("id",1);
				map1.put("text","菠菜");
				Map<String,Object> map2 = new HashMap<>();
				map2.put("id",2);
				map2.put("text","鸡蛋");
				list.add(map1);
				list.add(map2);
			}else{
				Map<String,Object> map1 = new HashMap<>();
				map1.put("id",1);
				map1.put("text","菠菜");
				Map<String,Object> map2 = new HashMap<>();
				map2.put("id",2);
				map2.put("text","猪肉");
				list.add(map1);
				list.add(map2);
			}
			return WDMessage.success(Constant.QUERY_SUCCESS,list);
		} catch (Exception ex) {
			ex.printStackTrace();
			return WDMessage.error(Constant.QUERY_FAILURE);
		}
	}

5、数据回显

$(document).ready(function () {
        //初始化select2
        toLoadmaterial();
        //SELECT2数据回显
        var data = '${material_list}';  //material_list格式：[{id:"",name:""}]
        if(data!=undefined&&data!=''){
            var value = JSON.parse(data);
            echoSelect2("#material_id",value);
        }
    })

//回显数据
    function echoSelect2(dom,value){
        $.each(value,function(index,value){
            $(dom).append(new Option(value.name, value.id, false, true));
        });
        $(dom).trigger("change");
    }