jquery ajax select 二级联动

2019独角兽企业重金招聘Python工程师标准>>>

产品分类需要做二级分类

代码清单1：

package com.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import com.bean.SecondType;
import com.factory.DAOFactory;public class QuerySecondTypeByMainTypeIdServlet extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {int main_type_id=Integer.parseInt(req.getParameter("main_type"));List<SecondType> listST= DAOFactory.getTypeDAOInstance().getSecondTypeByMainTypeId(main_type_id);JSONArray object = JSONArray.fromObject(listST);System.out.println(object.toString());sendMsg(object.toString(), resp);} @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}public  void sendMsg(String content,HttpServletResponse response)throws IOException{response.setCharacterEncoding("utf-8");PrintWriter out =response.getWriter();out.write(content);out.flush();out.close();}
}

代码清单2：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.factory.DAOFactory" %>
<%@ page import="com.bean.MainType" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'addSecondType.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="<%=path %>/script/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#main_type").change(function(){// alert($(this).val());$_mainTypeId=$(this).val();$.getJSON("./querySecondTypeByMainTypeId.do?main_type="+$_mainTypeId,"",function(response){$("#second_type").show();$("#second_type option").remove();$.each(response,function(i){//console.dir(response[i]);$("#second_type").append("<option value="+response[i].second_type_id+">"+response[i].second_type_name+"</option>");});});      });})</script></head><body><%List<MainType> listMT=  DAOFactory.getTypeDAOInstance().queryAllMainType();%>类别：<select name="main_type" id="main_type"><%for(int i=0;i<listMT.size();i++){MainType mainType= (MainType)listMT.get(i);int main_type_id= mainType.getMain_type_id();String main_type_name= mainType.getMain_type_name();%><option value="<%=main_type_id %>"><%=main_type_name%></option><%}%></select><select name="second_type" id="second_type" style="display: none;"></select></body>
</html>

效果截图

代码很恶心,大家凑合看吧。

知识点总结:

1.JSONArray封装数据

2.jquery 对select 操作

3.复习jquery ajax操作

转载于:https://my.oschina.net/dlpinghailinfeng/blog/59631

jquery ajax select 二级联动相关推荐

jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
使用js、jquery完成省市二级联动
2019独角兽企业重金招聘Python工程师标准>>> 使用js完成省市二级联动 <!DOCTYPE html> <html><head>< ...
php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
如何使用JQuery实现Js二级联动和三级联动
前言:使用JQuery封装好的js方法来实现二级三级联动要比直接使用js来实现二级三级联动要简洁很多.所以说JQuery是个非常强大的.简单易用的.兼容性好的JavaScript库,已经成为前端开发人 ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
javascript实现下拉条联动_js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 String path = request.getContextPath(); String basePath = ...
vue.js 默认选中select_vue select二级联动第二级默认选中第一个option值的实例
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了所在区域 {{item.country}} {{item}} d ...

jquery ajax select 二级联动

jquery ajax select 二级联动相关推荐

最新文章

热门文章