Ajax获取php返回json数据动态生成select下拉框


功能:根据选择不同层次,在专业下拉框中动态生成对应分类的专业。


HTML:

<label>层次</label>
<select name="level" id="level">
   <option value="1">本科</option>
   <option value="2">高职(专科)</option>
</select>
<label>专业</label>
<select name="major" id="major">
   <option value="">--</option>
</select>

JQuery:

$("#level").click(function(){
                        $.ajax({
                            type:"POST",
                            url:"{:U('Target/queryMajor')}",
                            dataType: "json",
                            data:{
                                level:$('#level').val()
                            },
                            success:function(data){
                                $("#major").empty();
                                switch (data.status){
                                    case '1':
                                        $("#major").append("<option value='' >--</option>");
                                        $.each(data.data,function(index,val){
                                            $("#major").append('<option value='+val.major+' >'+val.major+'</option>');
                                        });
                                        break;
                                    case '0':
                                        $("#major").append("<option value='' >--</option>");
                                        break;
                                }
                                return false;
                            }
                        });
                        return false;
                    });

后台控制器:

public function queryMajor()
	{
		if(I('post.level') == 1){$ccmc = '本科';}else{$ccmc = '高职(专科)';}
		$dao = M('Plan');
		$condition["ccmc"] = $ccmc;
		$record = $dao->where($condition)->field('major')->select();
		if($record != null){
			$this->ajaxReturn($record,'','1');
		}else{
			$this->ajaxReturn('','','0');
		}
	}



每日吃超过十块的盖饭都会考虑好久

却心系宇宙从哪来到哪去的普普通程序员

2017.9.7



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以通过以下步骤实现: 1. 创建一个HTML页面,包含三个下拉框,分别用于选择省、市、县。 2. 在页面中引入jQuery库和一个用于获取JSON数据ajax函数。 3. 创建一个JSON文件,命名为area.json,其中包含省、市、县的数据。 4. 使用ajax函数获取area.json文件中的数据,并将数据填充到省、市、县三个下拉框中。 5. 给省下拉框绑定一个change事件,当省下拉框的值改变时,根据省的值获取对应的市数据,并将市数据填充到市下拉框中。 6. 给市下拉框绑定一个change事件,当市下拉框的值改变时,根据市的值获取对应的县数据,并将县数据填充到县下拉框中。 7. 最后,根据用户选择的省、市、县的值,进行相应的操作。 以上就是使用ajax获取area.json数据实现省市县三级联动选择的步骤。 ### 回答2: ajax 是一种基于 HTTP 请求异步传输数据的技术,可以用来获取后台返回数据动态显示在页面上,这样可以极大地提高用户的体验。本篇文章将介绍如何使用 ajax 获取 area.json 数据,并实现省市县三级联动选择功能。 首先,我们需要准备一个 area.json 文件,该文件包含了省、市、县三级的地域数据,如下所示: ```json { "provinceList": [ { "id": 110000, "name": "北京市", "cityList": [ { "id": 110100, "name": "北京市市辖区", "areaList": [ { "id": 110101, "name": "东城区" }, { "id": 110102, "name": "西城区" } ] } ] } ] } ``` 接下来,我们需要在 HTML 页面中添加三个下拉框,分别用于显示省、市、县的选择结果,代码如下: ```html <div> <label>省份:</label> <select id="province"></select> </div> <div> <label>城市:</label> <select id="city"></select> </div> <div> <label>县/区:</label> <select id="area"></select> </div> ``` 请注意,上述代码中给每个下拉框添加了一个 id 属性,这便于我们在 JavaScript 中访问这些元素。 接下来,我们需要编写 JavaScript 代码,使用 ajax 技术获取 area.json 文件并解析其中的数据,最终生成省市县三级联动选择菜单。具体代码如下: ```javascript var province = document.getElementById("province"); var city = document.getElementById("city"); var area = document.getElementById("area"); // 使用 ajax 获取 area.json 文件 var xhr = new XMLHttpRequest(); xhr.open("GET", "area.json", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 解析 json 数据 var data = JSON.parse(xhr.responseText); var provinceList = data.provinceList; // 生成省份下拉菜单 for (var i = 0; i < provinceList.length; i++) { var option = document.createElement("option"); option.value = provinceList[i].id; option.innerHTML = provinceList[i].name; province.appendChild(option); } // 生成城市下拉菜单 province.onchange = function () { var provinceId = province.value; var cityList = null; for (var i = 0; i < provinceList.length; i++) { if (provinceList[i].id == provinceId) { cityList = provinceList[i].cityList; break; } } city.innerHTML = "<option value=''>请选择城市</option>"; area.innerHTML = "<option value=''>请选择县/区</option>"; for (var i = 0; i < cityList.length; i++) { var option = document.createElement("option"); option.value = cityList[i].id; option.innerHTML = cityList[i].name; city.appendChild(option); } }; // 生成县/区下拉菜单 city.onchange = function () { var cityId = city.value; var areaList = null; for (var i = 0; i < provinceList.length; i++) { var cityList = provinceList[i].cityList; for (var j = 0; j < cityList.length; j++) { if (cityList[j].id == cityId) { areaList = cityList[j].areaList; break; } } if (areaList != null) { break; } } area.innerHTML = "<option value=''>请选择县/区</option>"; for (var i = 0; i < areaList.length; i++) { var option = document.createElement("option"); option.value = areaList[i].id; option.innerHTML = areaList[i].name; area.appendChild(option); } }; } }; xhr.send(); ``` 上述代码中,我们先定义了三个变量 province、city、area,它们分别用于缓存 HTML 页面中的省市县下拉框元素。 然后,我们使用 XHR 对象发送 GET 请求,获取 area.json 文件中的数据。其中,onreadystatechange 事件用于在 readyState 和 status 发生变化时执行相应的回调函数。 当获取数据时,我们解析 json 数据,并生成省份下拉菜单。同时,为省份下拉菜单注册一个 onchange 事件,用于生成城市下拉菜单。 在城市下拉菜单中同样注册 onchange 事件,用于生成县/区下拉菜单。 最后,我们使用 createElement 方法生成选项元素,并使用 appendChild 方法添加到相应的下拉框中。 这样,我们就完成了使用 ajax 技术获取 area.json 数据,并实现省市县三级联动选择功能的代码编写。 ### 回答3: 在前端开发中,省市县三级联动选择是比较常见的功能,通过ajax获取area.json数据可以实现这一功能。下面分为三个步骤进行讲解。 一、获取数据 在前端中使用ajax获取数据是比较常见的做法。可以使用jQuery库提供的$.ajax方法,从服务器端获取数据。在获取area.json数据的过程中,需要设置数据数据类型为json。以下是一个获取数据的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ //处理数据 } }); }); 二、处理数据 获取数据后,我们需要对其进行处理,在jquery中可以使用$.each()方法对数据进行循环遍历,然后将其添加到HTML元素中去。 $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理省份数据 $.each(province.city,function(index,city){ //处理城市数据 $.each(city.area,function(index,area){ //处理县级数据 }); }); }); } }); }); 三、显示数据 处理完数据后,最后一步就是将其显示在页面上了。可以通过jquery选择器选定需要显示数据的HTML元素,然后将数据添加到HTML中去。下面是一个简单的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理省份数据 var option=$('<option>'); option.attr('value',province.name); option.text(province.name); $('#province').append(option); $.each(province.city,function(index,city){ //处理城市数据 var option=$('<option>'); option.attr('value',city.name); option.text(city.name); $('#city').append(option); $.each(city.area,function(index,area){ //处理县级数据 var option=$('<option>'); option.attr('value',area); option.text(area); $('#area').append(option); }); }); }); } }); }); 通过以上的三个步骤,就可以实现省市县三级联动选择的功能。当用户选择不同的省份时,就会根据省份的不同,加载不同的城市以及县级数据。这样的交互方式可以让用户更加直观地了解省市县数据,也更加方便用户选择所需的城市或县级。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jqdfTiTan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值