jquery 二级联动

<tr>
<td class="tdwidth">城市:</td>
<td><select id="province" name="" style="width:175px;height:26px;" onchange="fuc()" >

</select> &nbsp;
<select id="city" name="" style="width:175px;height:26px;">
</select> </td>

</tr>

<script type="text/javascript">
$(document).ready(function () {
htmlobj = $.ajax({ url: "../img/json.js", async: false });
$.each(jQuery.parseJSON(htmlobj.responseText), function (index, content) {
$("#province").append($("<option value=\"" + content.name + "\">" + content.name + "</option>"));
});
$("#city").append($("<option value=\"1\">请选择</option>"));
});
function fuc() {
htmlobj = $.ajax({ url: "../img/json.js", async: false });
$("#city").html("");
$.each(jQuery.parseJSON(htmlobj.responseText), function (index, content) {
if (content.name == $("#province").val()) {
$.each(content.sub, function (i, contex) {
$("#city").append($("<option value=\"" + contex.name + "\">" + contex.name + "</option>"));
});
}
});
}
</script>
时间: 2024-10-12 23:47:50

jquery 二级联动的相关文章

(实用篇)jQuery二级联动代码

jquery二级联动城市代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

jQuery二级联动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级联动</title> <script src="js/jquery-1.7.1.js"></script> <style> </style> <script type="

jquery实现select二级联动

jquery实现一个简单的select二级联动菜单,代码如下 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery 二级联动</title> 6 <style> 7 .city{ 8 display: none;; 9 } 10 .city_first { 11 display: block; 12 }

通同select便签实现简单的二级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术   程序开发   数据库   小类: 实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变.实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类

jQuery实例的ajax应用之二级联动

jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动 数据库表设计 csj_trade id int(11) auto_increment tname varchar(100) tradeType int(11) 其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类;不为0,而是某个数字的时候,则这个数字表示其父级的id. (1)主页面http://rl.82676666.com ——

Asp.Net下,基于Jquery的Ajax二级联动

最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制,所以抛弃这种方案,用Jquery实现Ajax效果.直接上代码,简单直观. 1.前端页面(这里给出页面二级联动示意,分别为两个select) <select name="xsxy" id="xsxy"> <option>-- 请选择学院名称 --&

份-城市,基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import java.util.Set; import com.opensymphony.xwork2.ActionSupport; /** * 控制器 * @author AdminTC */ public class ProvinceCityAction extends ActionSupport{ priv

jquery小练习 单选多选 二级联动 员工信息的添加与删除

单选多选与全选 就是点击按钮从左边把内容一道右边 <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <script type="text/javascript" src="js/jquery-3.4.1.min.js&qu