实现下拉菜单输入框模糊查询

最新推荐文章于 2024-08-31 18:03:39 发布

zhoujiyu_one

最新推荐文章于 2024-08-31 18:03:39 发布

阅读量7.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js，jQuery

本文链接：https://blog.youkuaiyun.com/weixin_40157571/article/details/79669875

js，jQuery 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery插件Select2来创建一个具有模糊查询功能的下拉菜单输入框。通过引入相应的CSS和JS文件，并设置语言为中文，可以实现下拉选项的初始化和占位提示。在页面加载完成后，调用select2方法进行初始化配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式如下

这是需要加载的js和css，还需要另外加载jQuery

//初始化产品线下拉框

$(document).ready(function(){

$(".js-example-basic-single").select2({language: "zh-CN", placeholder: "请选择"});

$.ajax({
type : "POST",
async:false,
contentType : 'application/json',
url : '<%=path%>/sysdict/cpx',
beforeSend:function(){
indeks = top.layer.load(1, {
shade: [0.1,'#000'] //0.1透明度的白色背景
});
},
complete:function(){
top.layer.close(indeks);
},
success : function(data) {
$("#lineCode").append("<option value='' style ='color:#ccc'></option>");
$.each(data, function(index, content){
$("#lineCode").append("<option value="+content.code+" style ='color:#ccc'>"+content.name+"</option>");
})
},
error:function(){
layer.alert('初始化产品线下拉框失败');
}

});