jq mysql二级联动_jq+php+mysql 实现二级菜单联动

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。

实现的效果就是当选择大类时,小类下拉框里的选项内容也随着改变。实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理。

html:

大类:

前端技术

程序开发

数据库

小类:

jQuery

$(function(){

getSelectVal();

$("#bigname").change(function(){

getSelectVal();

});

})

function getSelectVal(){

$.getJSON("server.php",{bigname:$("#bigname").val()},function(json){

var smallname = $("#smallname");

$("option",smallname).remove();

$.each(json,function(index,array){

var option = " > value='"+array['id']+"'>"+array['title']+"";

smallname.append(option);

});

});

}

php 获取数据就是根据大类的id 从数据库中获取小的分类,然后以json的格式返回。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!要实现HTML省市区三级联动的功能,可以借助jQuery来实现。以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>省市区三级联动</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> <script> $(function() { // 获取省份数据并填充下拉框 $.getJSON('province.json', function(data) { var options = '<option value="">请选择省份</option>'; $.each(data, function(index, province) { options += '<option value="' + province.code + '">' + province.name + '</option>'; }); $('#province').html(options); }); // 省份下拉框改变事件 $('#province').change(function() { var provinceCode = $(this).val(); if (provinceCode === '') { $('#city').html('<option value="">请选择城市</option>'); $('#area').html('<option value="">请选择地区</option>'); return; } // 获取城市数据并填充下拉框 $.getJSON('city.json', { provinceCode: provinceCode }, function(data) { var options = '<option value="">请选择城市</option>'; $.each(data, function(index, city) { options += '<option value="' + city.code + '">' + city.name + '</option>'; }); $('#city').html(options); $('#area').html('<option value="">请选择地区</option>'); }); }); // 城市下拉框改变事件 $('#city').change(function() { var cityCode = $(this).val(); if (cityCode === '') { $('#area').html('<option value="">请选择地区</option>'); return; } // 获取地区数据并填充下拉框 $.getJSON('area.json', { cityCode: cityCode }, function(data) { var options = '<option value="">请选择地区</option>'; $.each(data, function(index, area) { options += '<option value="' + area.code + '">' + area.name + '</option>'; }); $('#area').html(options); }); }); }); </script> </body> </html> ``` 在示例代码中,使用了三个`<select>`标签来分别表示省、市和区的下拉框。通过jQuery的`$.getJSON`方法来异步获取省、市、区的数据(以JSON格式存储),并根据选择的省、市来动态更新下一级的选项。 注:需要替换示例中的`province.json`、`city.json`、`area.json`为实际的省、市、区数据文件路径或后端接口地址。 希望对您有所帮助!如有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值