下载文档原格式
花了两天时间。
研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。
主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。
以下把代码贴出来。
供大家参考指正：ajax.js文件（位于根目录下js子目录）var xmlHttp;function createXmlHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHttp");}}basic_inc.php(位于根目录下/include子目录下)<?php$DB_SERVER="localhost";$DB_NAME="ajax";$DB_USER="root";$DB_PASSWORD="";?>conn.php(位于根目录下/include子目录下)<?phprequire_once("dir_inc.php");require_once($ROOT_DIR."include/basic_inc.php");@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());@mysql_select_db($DB_NAME);?>dir_inc.php（位于根目标下/include子目录下）<?php$ROOT_DIR="../";?>select_menu.html(位于根目录下是核心前台文件)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>select_menu</title><script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script><script type="text/javascript">var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤvar selArray;//申明一个全局数组。
三级级联下拉菜单的实现流程1.首先，我们需要在页面上创建三个下拉菜单元素。
First, we need to create three drop-down menu elements on the page.2.然后，我们要填充第一个下拉菜单，以显示第一级的选项。
Then, we will populate the first drop-down menu to display the options for the first level.3.接着，我们需要为第一个下拉菜单添加一个事件监听器，以便在选择其中一个选项时触发下一个菜单的更新。
Next, we need to add an event listener to the first drop-down menu, so that selecting an option triggers an update to the next menu.4.然后，我们将填充第二个下拉菜单，以显示第二级的选项。
Then, we will populate the second drop-down menu to display the options for the second level.5.接下来，我们需要为第二个下拉菜单添加事件监听器，以便在选择其中一个选项时触发第三个菜单的更新。
After that, we need to add an event listener to thesecond drop-down menu, so that selecting an option triggersan update to the third menu.6.然后，我们将填充第三个下拉菜单，以显示第三级的选项。
Next, we will populate the third drop-down menu todisplay the options for the third level.7.最后，当用户选择完最后一级的选项后，我们可以获取所选择的值并进行相应的处理。
ajax两级联动下拉列表和显示相应数据
本人实现了 ajax 异步实现两级联动的下拉列表和分类显示数据：应该算是充分的实现例子，包含了 JS + CSS 的简单设计
显示：显示书籍大类 ----> 无刷新的显示相对应的书籍小类；
选择书籍小类时候，自动显示相应的书籍信息！
自己试试吧，试试才知道，很好用的
纯手写的实例，仅供学习探究！
Jsp页面：
<%@ page language="java" import="java.util.*,com.AjaxDemo.optionLists.Dao,java.sql.*;"
contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
table{
width: 500px;
text-align: center;
font: bold fantasy 25px;
}
td{
height:35px;
width: 95px;
border-bottom-width:1px;
border-bottom-color: orange;
border-bottom-style: solid;
}
书籍大类：
<%}}catch (SQLException e) {e.printStackTrace();}finally{data.close();} %>
书籍小类：
请选
择
书
籍
类
别
！。
PHPAJAX2级联动下拉列表（...PHP+AJAX2级联动下拉列表（简单好用）这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。
废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：var http_request=false;function send_request(url){//初始化，指定处理函数，发送请求的函数http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType){//设置MIME类别http_request.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE浏览器try{http_request=new ActiveXObject("Msxml2.XMLHttp");}catch(e){try{http_request=new ActiveXobject("Microsoft.XMLHttp");}catch(e){}}}if(!http_request){//异常，创建对象实例失败window.alert("创建XMLHttp对象失败！");return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码http_request.open("GET",url,true);http_request.send(null);}//处理返回信息的函数function processrequest(){if(http_request.readyState==4){//判断对象状态if(http_request.status==200){//信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.respons eText;}else{//页面不正常alert("您所请求的页面不正常！");}}}function getclass(obj){var pid=document.form1.select1.value;document.getElementById(obj).innerHTML="<option>loading...</o ption>";send_request(‘doclass.php?pid=‘+pid);reobj=obj;}这个程序的核心就是动态添加<option>......</option>服务器端是进行数据的检索，很简单：<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码$pid=$_GET[‘pid‘];$db=mysql_connect("localhost","root","7529639"); //创建数据库连接mysql_query("set names ‘GBK‘");mysql_select_db("menuclass");$sql="select classname from menu where parentid=".$pid."";$result=mysql_query($sql);//循环列出选项while($rows=mysql_fetch_array($result)){echo ‘<option>‘;echo $rows[‘classname‘];echo "</option>\n";}>再看看列表页面的html：<script language="javascript" src="ajaxmenu.js"></script><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax2级联动菜单演示</title></head><body><form name="form1"><select name="select1" id="class1" style="width:100;" onChange="getclass(‘class2‘);"><option selected="selected"></option><option value="1">大类1</option><option value="2">大类2</option></select><select name="select2"id="class2" style="width:100;"></select></form></body></html>附件1.jpg(1.99 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表2.jpg(3.25 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表3.jpg(5.92 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表4.jpg(5.62 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表ajaxdemo.rar(1.66 KB)2007-9-24 10:05, 下载次数: 3PHP+AJAX2级联动下拉列表搜索更多相关主题的帖子: AJAX PHP列表台州南开技术小组专门用PHP+MYSQL技术进行Web(网站、平台、系统等)开发，凭借其开发产品的非凡速度、领先的技术优势、富于创新的开发团队，为众多行业门户、专业型站点提供最有优质的服务和技术保障。
使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例⾸先我们需要先建⽴好数据库，将⼀些数据插⼊进去需要两张表：province：省份表city：城市表如图：然后再在java中建⽴相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static String user;private static String password;static {Properties prop = new Properties();//读取⽂件try {InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");prop.load(in);driver = prop.getProperty("jdbc.driver");url = prop.getProperty("jdbc.url");user = prop.getProperty("er");password = prop.getProperty("jdbc.password");} catch (IOException e) {e.printStackTrace();}}/*** 获取连接对象* @returnpublic static Connection getConnection(){Connection conn = null;try {Class.forName(driver);conn = DriverManager.getConnection(url, user, password);} catch (Exception e) {throw new RuntimeException(e);}return conn;}/*** 关闭资源* @param conn* @param pstmt* @param stmt* @param rs*/public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ try {if (conn != null) {conn.close();}if (pstmt != null) {pstmt.close();}if (stmt != null) {stmt.close();}if (rs != null) {rs.close();}} catch (SQLException e) {throw new RuntimeException(e);}}⾸先我们可以在页⾯加载的时候获取所有省份的信息，SQL语句如下Connection conn = null;PreparedStatement pstmt = null;Province province2 = null;@Overridepublic ArrayList<Province> findAllPro() {ResultSet rs = null;ArrayList<Province> pros = null;try {String sql = "select id,place from province";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);pros = new ArrayList<Province>();rs = pstmt.executeQuery();while(rs.next()){Province province = new Province();province.setId(rs.getInt(1));province.setPlace(rs.getString(2));pros.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}return pros;将查到的数据放到后台,建⽴⼀个SelectedServlet类，⽤于接收查询到的所有省份的信息response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//创建⼀个Place对象ArrayList<Province> pros= new Place().findAllPro();PrintWriter out = response.getWriter();//将集合直接转换为Json对象out.write(JSONArray.fromObject(pros).toString());在这⾥会⽤到集合转换Json对象，我们需要导⼊以下⼏个包然后我们开始写前台页⾯：<body>省份:<select id="province"><option>--请选择省份--</option></select>城市:<select id="city"><option>--请选择城市--</option></select><br/><br/><span></span></body>然后jQuery代码如下:（由于我导⼊的jQuery版本⽐较低，所以使⽤的⽅法是getJSON，⽽不是getJson）$.getJSON("SelectedServlet",function(data,textStatus){var provinces = data;var res = "";for(var i =0;i<provinces.length;i++){<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";}$("#province").append(res);});这样就能在页⾯加载的时候获取到数据然后我们再来做联动，⾸先给下拉框添加⼀个change事件，然后获取选中的信息，将选中的信息发送到另⼀个CityServlet中//下拉框改变时触发的事件$("#province").change(function(){var seled = $("option:selected").html();$("span").html(seled);$.getJSON("CityServlet",{"province":encodeURI(encodeURI(seled))},function(data){$("#city").html("");var citys = data;var res = "";for(var i = 0;i<citys.length;i++){res += "<option>"+citys[i].place+"</option>";}$("#city").append(res);});});服务器通过获得的信息通过sql语句查询出来，SQL代码如下：public ArrayList<City> findAllCityByPro(String name) {ResultSet rs = null;ArrayList<City> citys = null;try {//通过名字获得所有值String sql = "select c.city_place from city c ,"+ "province p where c.province_id = "+ " (select id from province where place = '"+ name +"') "+ " and c.province_id = p.id";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);citys = new ArrayList<City>();System.out.println(sql);rs = pstmt.executeQuery();while(rs.next()){City city = new City();city.setPlace(rs.getString(1));citys.add(city);}System.out.println(citys);} catch (SQLException e) {e.printStackTrace();}return citys;}将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，⽽不⽤各种跳转页⾯，这就是Ajax(Asynchronous Javascript And XML),protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");// String proName = "浙江";String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),"utf-8");ArrayList<City> citys= new Place().findAllCityByPro(proName);PrintWriter out = response.getWriter();out.write(JSONArray.fromObject(citys).toString());}⾄于显⽰页⾯的代码也在前⾯写到jQuery语句中了效果如下：以上这篇使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
JS+AJAX实现省市区的下拉列表联动本⽂实例为⼤家分享了JS+AJAX实现省市区下拉列表联动的具体代码，供⼤家参考，具体内容如下效果图如下，DB中存取的数据来抽取.前台JSP页⾯的实现<div class="info"><div class="title">企业地址:</div><div class="value"><fieldset disabled><select id="provinceSelect" class="form-control" data-val="${factoryCenterInfo.province}" οnchange="provinceChange()"><c:forEach items="${factoryPlace.provinceList}" var="province" varStatus="status"><option value="${province.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.province == province.key}">selected</c:if></span><span style="color:#3366ff;">></span>${province.value}</option> </c:forEach></select></fieldset><fieldset disabled><select id="citySelect" class="form-control" data-val="${factoryCenterInfo.city}" οnchange="cityChange()"><c:forEach items="${factoryPlace.cityList}" var="city" varStatus="status"><option value="${city.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.city == city.key}">selected</c:if></span>>${city.value}</option></c:forEach></select></fieldset><fieldset disabled><select id="areaSelect" class="form-control" data-val="${factoryCenterInfo.area}"><c:forEach items="${factoryPlace.areaList}" var="area" varStatus="status"><option value="${area.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.area == area.key}">selected</c:if></span>>${area.value}</option></c:forEach></select></fieldset></div></div>JS实现代码效果：实现多次ajax请求，联动搜索数据function provinceChange(){var provinceId = $("#provinceSelect").val();$("#citySelect").empty();$("#areaSelect").empty();if(provinceId != null && provinceId != ""){$.ajax({type: "POST",url:"<span style="color:#3333ff;">factory/getChangeList</span>",dataType:'json',data: {"parentId":provinceId,"placeKbn":"C"},cache:false,success: function(data){if("success" == data.result){if(data.cityList != null && data.cityList.length > 0){for(var i = 0;i < data.cityList.length;i++){var city = data.cityList[i];var key = (city.key == null? "":city.key);var value = (city.value == null? "":city.value);$("#citySelect").append("<option value = \"" + key + "\">"+ value +"</option>");}}else{$("#citySelect").append("<option> </option>");}$("#areaSelect").append("<option> </option>");}if("error" == data.result){$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}},error:function(XMLHttpRequest, textStatus, errorThrown){$("#errorContent").html("系统异常请联系管理员");}});}else{$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}}function cityChange(){var cityId = $("#citySelect").val();$("#areaSelect").empty();if(cityId != null && cityId != ""){$.ajax({type: "POST",url:"<span style="color:#3333ff;">factory/getChangeList</span>",dataType:'json',data: {"parentId":cityId,"placeKbn":"Q"},cache:false,success: function(data){if("success" == data.result){if(data.areaList != null && data.areaList.length > 0){for(var i = 0;i < data.areaList.length;i++){var area = data.areaList[i];var key = (area.key == null? "":area.key);var value = (area.value == null? "":area.value);$("#areaSelect").append("<option value = \"" + key + "\">"+ value +"</option>");}}else{$("#areaSelect").append("<option> </option>");}}if("error" == data.result){$("#areaSelect").append("<option> </option>");}},error:function(XMLHttpRequest, textStatus, errorThrown){$("#errorContent").html("系统异常请联系管理员");}});}else{$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}}后台controller实现代码@RequestMapping("<span style="color:#3333ff;">getChangeList</span>")@ResponseBodypublic Object getChangeList(String parentId,String placeKbn){logBefore(logger, "factory/getChangeList");Map<String,Object> returnMap = new HashMap<String,Object>();if(FactoryConsts.CHAR_KBN_CITY.equals(placeKbn)){if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){ returnMap.put("result", "success");returnMap.put("cityList", getPlacelist(parentId, placeKbn));}else{returnMap.put("error", "市列表为空");returnMap.put("cityList", "");}}else if(FactoryConsts.CHAR_KBN_AREA.equals(placeKbn)){if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){ returnMap.put("result", "success");returnMap.put("areaList", getPlacelist(parentId, placeKbn));}else{returnMap.put("error", "区列表为空");returnMap.put("areaList", "");}}return returnMap;}/*** 省下拉列表** @return*/private List<PlaceOption> getPlacelist(String parentId,String kbn){//下拉列表List<PlaceOption> placeList = new ArrayList<PlaceOption>();placeList.add(new PlaceOption());QueryPlaceInfoParam queryParam = new QueryPlaceInfoParam();queryParam.setPlaceKbn(kbn);if(!StringUtils.isEmpty(parentId)){queryParam.setPlaceId(Integer.valueOf(parentId));}FactoryPlaceNameResult placeResult = placeInfoService.queryPlaceInfo(queryParam);if(placeResult != null && "0".equals(placeResult.getResult())&& placeResult.getPlaceInfo() != null&& placeResult.getPlaceInfo().size() > FactoryConsts.INT_0){List<PlaceInfoFa> placeInfo = new ArrayList<PlaceInfoFa>();placeInfo = placeResult.getPlaceInfo();for(FactoryPlaceInfo info : placeInfo){PlaceOption option = new PlaceOption();option.setKey(String.valueOf(info.getPlaceId()));option.setValue(info.getPlaceName());placeList.add(option);}}return placeList;}同时点画⾯menu的时候，画⾯初期话的时候controller实现/*** 基本信息初期化⽅法** @param request* @return*/@RequestMapping("toFactoryBaseInfo")public ModelAndView toFactoryBaseInfo(HttpServletRequest request){logBefore(logger, "factory/toFactoryBaseInfo");ModelAndView mv = new ModelAndView();//企业类型Map<String,String> factoryTypeMap = new TreeMap<String,String>();factoryTypeMap.putAll(FactoryConsts.FACTORY_TYPE_MAP);mv.addObject("factoryTypeMap", factoryTypeMap);FactoryFactoryInfo factoryInfo = (FactoryFactoryInfo) request.getSession().getAttribute(Const.SESSION_FACTORY);//取得企业信息FactoryFactoryInfoParam infoParam = new FactoryFactoryInfoParam();FactoryFactoryInfoResult infoResult = new FactoryFactoryInfoResult();infoParam.setFactoryId(String.valueOf(factoryInfo.getFactoryId()));infoParam.setDifferent(FactoryConsts.STRING_WEB_ONE); //webinfoResult = factoryService.factoryInfo(infoParam);FactoryPlace factoryPlace = new FactoryPlace();<span style="color:#3333ff;">// 省下拉列表factoryPlace.setProvinceList(getPlacelist("0",FactoryConsts.CHAR_KBN_PROVINCE));// 市下拉列表factoryPlace.setCityList(getPlacelist(infoResult.getFactoryInfoEx().getProvince(),FactoryConsts.CHAR_KBN_CITY));// 区下拉列表factoryPlace.setAreaList(getPlacelist(infoResult.getFactoryInfoEx().getCity(),FactoryConsts.CHAR_KBN_AREA));</span> <span style="color:#cc66cc;">mv.addObject("factoryPlace", factoryPlace);//地址的列表</span><span style="color:#6633ff;">mv.addObject("factoryCenterInfo", infoResult.getFactoryInfoEx());//企业表的基本信息</span> mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");return mv;}多级联动效果就能实现了。
jquery的ajax调用后台服务方法实现下拉框联动时,json解析问题主题：jquery 的ajax 调用后台服务方法实现下拉框联动时，json 解析问题内容部分我在页面中通过ajax 调用后台方法服务，实现联动！ajax 方法如下： JavaScript code ?123456 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22232$.ajax({type: "post",async: false,contentType: "application/json; charset=utf-8",data: "{id:'" + id + "'}",url: "AllAssessResults.aspx/GetObjListByDept Id", //后台webservice 里的方法名称dataType: "json",success: function (data) {alert(data);var optionstring = "";var dataObj = $.parseJSON(data);//var dataObj = eval("(" + data + ")");for (var i = 0; i < dataObj.length; i++) {optionstring += "" + dataObj[i].username + ""; }$("#selectObj").html(optionstring);},error: function (msg) {alert("出错了！");}});4后台得到的json数据如下：[{ "username":"魏", "usercode":"A1"},{ "username":"邢", "usercode":"A2"},{ "username":"杨", "usercode":"A3"},{ "username":"王", "usercode":"A4"},{ "username":"叶", "usercode":"A5"},{ "username":"宋", "usercode":"A6"},{ "username":"苏", "usercode":"A7"}]解析时候总是提示我：'length' 为空或不是对象应该是这个【dataObj.length】。
layuiAjax请求给下拉框赋值的实例如下所⽰：<!DOCTYPE html><html><head><title>排课设置</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><link rel="stylesheet" href="/vendor/layui/css/layui.css" rel="external nofollow" media="all"></head><body><div class="layui-form" lay-filter="boardFilter"><hr><div class="layui-form-pane layui-tab-content" style="margin: -10px auto;"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">查询内容</label><div class="layui-input-inline" style="width: 250px;"><input class="layui-input" name="schName" placeholder="请输⼊学校名称" id="schName" autocomplete="off"></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">学期</label><div class="layui-input-inline" style="width: 200px;"><select name="termId" id="termId"></select></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">列表状态</label><div class="layui-input-inline" style="width: 150px;"><select name="msgType" id="msgType"><option value="">全部状态</option><option value="1">申请中</option><option value="2">确认申请</option><option value="3">已经发布</option><option value="0">已撤销</option></select></div></div><div class="layui-inline toolbarBtn"><button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="getSearch" id="getSearch" name="getSearch"><i class="layui-icon"></i> 查询</button> </div></div></div><table class="layui-table" id="infoTable" lay-filter="filterTable"></table><script type="text/javascript" src="/vendor/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/vendor/layui/layui.js"></script><script type="text/html" id="action"><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">查看</a>{{# if(d.status===2){ }}<a class="layui-btn layui-btn-xs" lay-event="send">推送</a>{{# } }}{{# if(d.status===3){ }}<a href='{{d.url}}' class='layui-btn layui-btn-xs'>下载排课表</a>{{# } }}</script><script type="text/html" id="courseArrangeFlag">{{# if(d.courseArrangeFlag===0){ }}<h>⾏政班排课</h>{{# } else { }}<h>⾛班排课</h>{{# } }}</script><script type="text/html" id="status">{{# if(d.status===0){ }}<h>撤消申请</h>{{# } else if(d.status===1){ }}<h>申请中</h>{{# } else if(d.status===2){ }}<h>排课中</h>{{# } else if(d.status===3){ }}<h>已经推送</h>{{# } else if(d.status===4){ }}<h>已发布课程表</h>{{# } }}</script><script>e(['table','layer'], function() {var table = layui.table,form = layui.form;var $ = layui.jquery, layer = yer;var tableIns = table.render({elem: '#infoTable',url: '/web/courseArrange/list',id: 'idTable',page: true,limits: [10,20,50,100],limit: 10 //默认采⽤10,cols: [[ //标题栏{checkbox: true, fixed: true},{field: 'courseArrangeId', title: '序号', fixed: true},{field: 'schName', title: '学校名称'},{field: 'courseArrangeFlag', title: '排课类型', templet: '#courseArrangeFlag'},{field: 'termName', title: '学期'},{field: 'recordTime', title: '申请时间'},{field: 'status', title: '状态', templet: '#status'},{field: 'action', title: '操作', templet: '#action'}]]});//监听管理操作form.on('switch(schControlInput)', function(obj){var normalValueif(obj.elem.checked){normalValue = '0';}else{normalValue = '1';}$.ajax({url:'/school/editIsNormalSchool',type:"POST",dataType:"json",data:{"schId":this.value, "statusValue":normalValue},success:function(res){location.reload();},});});// 监听Table⼯具条table.on('tool(filterTable)', function(obj) {var data = obj.data;if (obj.event === 'view') {location.href="courseArrangeView.html?id=" rel="external nofollow" +data.courseArrangeId+"&schId="+data.schId+"&areaId="+data.areaId;}else if (obj.event === 'send') {layer.open({type: 2,title: '导⼊并推送',maxmin: true,shadeClose: false, //点击遮罩关闭层area : ['700px' , '600px'],content: '/page/business/course/courseArrangeUpload.html?schId='+data.schId+'&areaId='+data.areaId+'&termId='+data.termId+'&courseArrangeFlag='+data.courseArrangeFlag+'&phone='+data.phone ,btn: '关闭',btnAlign: 'c' //按钮居中,shade: 0 //不显⽰遮罩,yes: function(){layer.closeAll();},end: function () {location.reload();}});}});form.on('submit(getSearch)', function(data){table.reload('idTable', {where: data.field});});$(document).ready(function () {$("select[name=termNm]").empty();$.ajax({async: false,type: "POST",url: "/web/courseArrange/termList",dataType: "json",data: {},success: function (res) {var opt = "<option value='' selected = \'selected\'>全部</option>";$("select[name=termId]").append(opt);for(var i=0; i<res.data.length; i++){var option="<option value=\""+res.data[i].termId+"\"";option += ">"+res.data[i].termName+"</option>"; //动态添加数据$("select[name=termId]").append(option);}layui.form.render('select','boardFilter');}});});});</script></body></html>以上这篇layui Ajax请求给下拉框赋值的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
