HTML:

<li>
<span>所在地区:</span> <select name="prov" id="ddl_prov" onchange="event_change_prov(this);" class="required" missingmsg="请选择省">
<option value="">请选择省</option>
</select> </li>
<li>
<span></span> <select name="city" id="ddl_city" onchange="event_change_city(this);" class="required" missingmsg="请选择市">
<option value="">请选择市</option>
</select> </li>
<li>
<span></span> <select name="area" id="ddl_area" class="required" missingmsg="请选择区">
<option value="">请选择区</option>
</select> </li>

Javascript:

//省值改变
function event_change_prov(self) {
var value = $(self).val();
if (isEmpty(value)) {
bindDropdownList("ddl_city", [])
} else {
bindArea("ddl_city", value);
}
} //市值改变
function event_change_city(self) {
var value = $(self).val();
if (isEmpty(value)) {
bindDropdownList("ddl_area", [])
} else {
bindArea("ddl_area", value);
}
} //绑定下拉框
function bindDropdownList(targetId, data) {
$("#" + targetId).html("");
var html = "";
if (targetId == "ddl_prov")
{
html="<option value=''>请选择省</option>";
} else if (targetId == "ddl_city") {
html = "<option value=''>请选择市</option>";
} else if (targetId == "ddl_area") {
html = "<option value=''>请选择区</option>";
} else {
html = "<option value=''>请选择</option>";
}
for (var i = 0; i < data.length; i++) {
html = html + "<option value='" + data[i].Value + "'>" + data[i].Text + "</option>";
}
$("#" + targetId).html(html);
} //级联下拉框列表
var ddls = ["ddl_prov", "ddl_city", "ddl_area"]; //绑定地区
function bindArea(id, code) {
if (isEmpty(id) || $("#" + id).length == 0) {return;
}
if (id == "ddl_prov" && isEmpty(code)) {
code = "";
}
Request.get('/XXX/XXX?code=' + code,
function (result) {
bindDropdownList(id, result);
var name = $("#" + id).attr("name");
var or = $("#hid_" + name).val();
if (isEmpty(or)) {return;
}
$("#" + id).val(or);
var ncode = $("#" + id).val();
var index = ddls.indexOf(id);
if (index >= 0 && index < ddls.length - 1) {
var nid = ddls[index + 1];
bindArea(nid, ncode);
}
});
}

Js异步级联选择框实践方法的更多相关文章

  1. Ajax级联选择框

    Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

  2. ElementUI 级联选择框 设置最后一级可选及相关问题解决

    在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项.具体实现如下: ...

  3. js控制日期选择框datetime-local和select的展开

    注: js控制元素展开不受元素css属性的限制,例如opacity,z-index等 1. 使用js控制日期选择框的展开 ios: document.querySelector(".targ ...

  4. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  5. elementUI 级联选择框 表单验证

    今天遇到了一个需求:进行级联选择框的表单验证,突然有点懵逼.感觉应该和正常的表单验证类似,但不是很清晰,后来还是在博客园找到了相关参考文章. 先上代码: <el-form :model=&quo ...

  6. Excel 名称管理器是什么,并实现一个级联选择框

    名称 在 Excel 中,每一个单元格都有自己的名称.表格横向是字母,纵向是数字,组合起来就是一个单元格的名称. A13 所代表的是 A 列,13 行的单元格.把一组单元格组合起来,加上一个名称,在 ...

  7. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  8. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  9. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

随机推荐

  1. indexOf()忽略大小写方法

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果没有出现,则输出-1. indexOf() 方法对大小写敏感!所以要检索字符串且忽略大小写的时候,可以先把字符串转换成全部 ...

  2. 我的django之旅(二)模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

  3. ajax请求参数为中文乱码的情况

    解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...

  4. ecstore使用paypal支付显示不支持此支付

    问题描述: ecstore使用paypal支付,下单结算时显示不支持此支付. 问题和代码分析: 1.首先必须要保证默认货币是paypal支持的货币,paypal目前支付 ["supportC ...

  5. phpwind 去除init.phpwind.net统计功能

    修改的文件如下:global.phplib/staticpage.class.phprequire/template.phpsimple/index.php

  6. pyqt5模块

  7. Oracle静态监听和动态监听

    一.静态注册 静态注册指实例启动时读取listener.ora配置文件,将实例和服务注册到监听程序.无论何时启动一个数据库,默认都有两条信息注册到监听器中:实例和服务.SID_LIST_LISTENE ...

  8. hdu 1142 A Walk Through the Forest

    http://acm.hdu.edu.cn/showproblem.php?pid=1142 这道题是spfa求最短路,然后dfs()求路径数. #include <cstdio> #in ...

  9. KMP算法总♂结

    讲KM♂P算法之前,我们先讲一个故♂事. 有一天,sgg给了老obo一封信和一个单词,并给他一个任务:找出这封信出现了多少个单词,然后在规定时间内告诉他. 碰到这个问题,老obo会怎么做呢? 首先最直 ...

  10. C#开发者准备的通用性代码审查清单

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...