189 8069 5689

jquery怎么实现下拉选择不同显示不同

这篇文章主要介绍了jquery怎么实现下拉选择不同显示不同的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery怎么实现下拉选择不同显示不同文章都会有所收获,下面我们一起来看看吧。

创新互联公司是专业的佛山网站建设公司,佛山接单;提供网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行佛山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

下面步骤介绍了如何从数据库获取数据,并动态的在前端显示。

步骤一:jsp页面静态的select:

选择A

选择B

选择C

注意:

1、静态的select在某些场景下使用是没有问题的。但是在产品不同的需求时,动态select更能胜任其多样性。

2、select有多种写法,这里是最简单的。

步骤二:jQuery通过ajax请求获取动态的数据,并在jsp页面显示。

function IninDepart(){

$("#selectSM")。remove();//清空select列表数据

var state=1;

$.ajax({

type : "POST",

url : "/getItemDepartList.do",

dataType : "JSON",

data : {},

success : function(msg)

{

$("#selectSM")。prepend("请选择");//添加第一个option值

for (var i=0; i < msg.rows.length; i++) {

//如果在select中传递其他参数,可以在option 的value属性中添加参数

//$("#selectSM")。append(""+msg.rows[i]+"");

$("#selectSM")。append(""+msg.rows[i]+"");

}

},error:function(){

alertLayer("获取数据失败","error");

}

});

}

注意:这里使用的是jQuery、ajax,其他方式也可以实现。

步骤三:后台数据的处理。

public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{

//查询select数据

List> list=appServices.getAppList();

System.out.println("list::::::::" + list);

//获取数据存放到数组

String[] depart=null;

for (Map map : list) {

for (String k : map.keySet()) {

depart=((String) map.get(k))。split(",");

System.out.println("depart::::::::" + depart);

}

}

//去除数组中重复数据,存放到list

List strList=new ArrayList();

for (int i=0; i

if(!strList.contains(depart[i])) {

strList.add(depart[i]);

}

}

System.out.println("strList::::::::" + strList);

jsonObject.put("rows", strList);

return jsonObject;

}

注意:由于后台返回数据的问题,需要对数据进行截取并去除重复数据。如果没有这个需求,可以直接向前端返回一个数组或list即可。

关于“jquery怎么实现下拉选择不同显示不同”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“jquery怎么实现下拉选择不同显示不同”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


当前名称:jquery怎么实现下拉选择不同显示不同
链接地址:http://cdxtjz.cn/article/jophjo.html

其他资讯