json、jq实现三级联动选择框方法一

html代码:

    <select id="level1Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>
    <select id="level2Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>
    <select id="level3Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>

json数据:

    var fir_class = [{firId: 1,firName:"母婴儿童"},{firId: 2,firName:"美容彩妆"},{firId: 3,firName:"营养保健"}];
    var sec_class = [{secId: 1,secName:"奶粉",firId: 1},{secId: 2,secName:"营养辅食",firId: 1},
                        {secId: 3,secName:"面部护理",firId: 2},{secId: 4,secName:"男士护理",firId: 2},
                        {secId: 5,secName:"维生素",firId: 3},{secId: 6,secName:"胶囊",firId: 3}];
    var thi_class = [{thiID: 1,thiName:"品牌奶粉",secId: 1},{thiID: 2,thiName:"妈妈奶粉",secId: 1},
                        {thiID: 3,thiName:"粥/面条",secId: 2},
                        {thiID: 4,thiName:"洗面奶",secId: 3},
                        {thiID: 5,thiName:"男士洗面奶",secId: 4},
                        {thiID: 6,thiName:"维生素A",secId: 5},
                        {thiID: 7,thiName:"β胶囊",secId: 6}];

js代码:

    classColunm();
    function classColunm() {
        $.each(fir_class, function (k, p) {
            var option = "<option value='" + p.firId + "'>" + p.firName + "</option>";
            $("#level1Class").append(option);
        });

        $("#level1Class").change(function () {
            var selValue = $(this).val();
            $("#level2Class option:gt(0)").remove();//gt(0)前1个元素后的所有元素

            $.each(sec_class, function (k, p) {
                if (p.firId == selValue) {
                    var option = "<option value='" + p.secId + "'>" + p.secName + "</option>";
                    $("#level2Class").append(option);
                }
            });
        });
        $("#level2Class").change(function () {
            var selValue = $(this).val();
            $("#level3Class option:gt(0)").remove();

            $.each(thi_class, function (k, p) {
                if (p.secId == selValue) {
                    var option = "<option value='" + p.Id + "'>" + p.thiName + "</option>";
                    $("#level3Class").append(option);
                }
            });
        });
        $("#level1Class").change(function () {
            $("#level3Class option:gt(0)").remove();
        });

    }
思路:

先用jq遍历第一个json数据后放入第一个选择框中,将json定义的id值赋给option的value。当第一个选择框发生改变后触发后面的事件,如果第二个json数据中所对应的第一个josn的ID值等于它选择框的value值,那么在把第二个接送数据放入第二个下拉框中,第三个同理。

当前面的选择框发生改变后,清除后面的选择框的内容,保留第一个。

$(“#level3Class option:gt(0)”).remove();

这句意思是移除下拉框中的内容,只保留第一个。gt(0)意思就是:大于0

  • 2
    点赞
  • 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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值