select下拉生成,三级联动

单个下拉框生成

/**
 * select 下拉生成  
 * var html =
 *   $.divselect("#province", "#inputprovince");
 *      html+= '<div id="county">';
 *      html+= '<cite>请选择特效分类</cite>';
 *      html+= '<ul></ul>';
 *      html+= '</div>';
 *      html+= '<input name="" type="hidden" value="" id="inputcounty" />';
 */

jQuery.divselect = function (divselectid, inputselectid) {
    var inputselect = $(inputselectid);
    $(divselectid + " cite").click(function () {
        var ul = $(divselectid + " ul");
        ul.toggle("fast")
    });
    $(divselectid + " ul li").click(function () {
        var txt = $(this).text();
        $(divselectid + " cite").html(txt);
        var value = $(this).attr("data_value");
        inputselect.val(value);
        $(divselectid + " ul").hide();
    });
};

三级联动下拉框

html:
popup += '<div id="province">';
popup += '<cite>省</cite>';
popup += '<ul></ul>';
popup += '</div>';

popup += '<div id="city">';
popup += '<cite>市</cite>';
popup += '<ul></ul>';
popup += '</div>';

popup += '<div id="county">';
popup += '<cite>县</cite>';
popup += '<ul></ul>';
popup += '</div>';

css:
.u-mask cite {
  border: 1px solid #ccc;
  height: 36px;
  display: block;
  line-height: 34px;
  padding: 0 10px;
  width: 107px;
}
.newEditSite ul {
  width: 107px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 160px;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
}

.newEditSite ul li {
  cursor: pointer;
  line-height: 30px;
  padding: 0 10px;
}

.newEditSite ul li:hover {
  background: #f5f5f5;
}

/**
* 处理selct 的地址选择
*/
function orgSelect(areaid) {
    var aid, provinceid, cityid, option = '';
    if (areaid) { //areaid即是 countyid
        aid = areaReturnObj[areaid].split(",");
        provinceid = aid[0];
        cityid = aid[1];
    }
    var panel = $("#province ul");
    panel.empty();
    areaObj.province.map(function (val, i) {
        option += '<li data_value="' + val.id + '">' + val.name + '</li>';
    })
    panel.append(option);
    var cite = $("#province cite");
    cite.off("click");
    cite.click(function () {
        if (panel.css('display') == 'none') {
            panel.show();
        } else {
            panel.hide();
        }
    });
    $("#province ul li").off("click");
    $("#province ul li").click(function () {
        var txt = $(this).text();
        cite.html(txt);
        var value = $(this).attr("data_value");
        cite.attr("data_value", value);
        panel.hide();
        var secondId = areaObj.city[value][0].id;
        var threeId = areaObj.county[secondId][0].id;
        ComOrgSelect('city', value, secondId, threeId);
    });
    var firstId, firstName;
    if (provinceid) {
        firstId = provinceid;
        firstName = $("#province ul li[data_value=" + firstId + "]").text();
        cite.html(firstName);
        cite.attr("data_value", firstId);
        ComOrgSelect('city', firstId, cityid, areaid);
    } else {
        //没有传值的时候,新建
        firstId = areaObj.province[0].id;
        firstName = areaObj.province[0].name;
        cite.html(firstName);
        cite.attr("data_value", firstId);
        var secondId = areaObj.city[firstId][0].id;
        var threeId = areaObj.county[secondId][0].id;
        ComOrgSelect('city', firstId, secondId, threeId);
    }

}

function ComOrgSelect(key, id, secondId, areaid) {
    var option = '';
    var panel = $("#" + key + ' ul');
    panel.empty();
    areaObj[key][id].map(function (val, i) {
        option += '<li data_value="' + val.id + '">' + val.name + '</li>';
    })
    panel.append(option);
    var cite = $("#" + key + " cite");
    cite.off("click");
    cite.click(function () {
        if (panel.css('display') == 'none') {
            panel.show();
        } else {
            panel.hide();
        }

    });
    $("#" + key + " ul li").off("click");
    $("#" + key + " ul li").click(function () {
        var txt = $(this).text();
        cite.html(txt);
        var value = $(this).attr("data_value");
        cite.attr("data_value", value);
        panel.hide();
        if (key != 'county') {
            ComOrgSelect('county', value, areaObj['county'][value][0].id);
        }
    });

    var reId, reName;
    if (secondId) {
        reId = secondId;
        reName = $("#" + key + " ul li[data_value=" + secondId + "]").text();
        cite.html(reName);
        cite.attr("data_value", reId);
        if (key != 'county') {
            ComOrgSelect('county', reId, areaid);
        }
    } else {
    }

}






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现三级联动下拉菜单的方法有很多种,其中比较常用的是使用 Ajax 技术来实现。 以下是一个简单的示例代码: HTML: ```html <select name="province" id="province"> <option value="">请选择省份</option> <option value="1">广东省</option> <<option value="2">浙江省</option> </select> <select name="city" id="city"> <option value="">请选择城市</option> </select> <select name="district" id="district"> <option value="">请选择地区</option> </select> ``` JavaScript: ```javascript $(function() { // 省份下拉菜单改变事件 $('#province').change(function() { var provinceId = $(this).val(); if (provinceId) { // 发送 Ajax 请求获取城市数据 $.ajax({ url: '/get_cities', type: 'GET', data: {province_id: provinceId}, success: function(data) { // 清空城市和地区下拉菜单 $('#city').empty(); $('#district').empty(); // 添加城市选项 $('#city').append('<option value="">请选择城市</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { // 清空城市和地区下拉菜单 $('#city').empty(); $('#district').empty(); } }); // 城市下拉菜单改变事件 $('#city').change(function() { var cityId = $(this).val(); if (cityId) { // 发送 Ajax 请求获取地区数据 $.ajax({ url: '/get_districts', type: 'GET', data: {city_id: cityId}, success: function(data) { // 清空地区下拉菜单 $('#district').empty(); // 添加地区选项 $('#district').append('<option value="">请选择地区</option>'); $.each(data, function(index, district) { $('#district').append('<option value="' + district.id + '">' + district.name + '</option>'); }); } }); } else { // 清空地区下拉菜单 $('#district').empty(); } }); }); ``` 其中,`/get_cities` 和 `/get_districts` 是后端接口,用于返回城市和地区数据。当省份选项改变时,发送 AJAX 请求,获取对应的城市数据,并动态生成城市选项;当城市选项改变时,发送 AJAX 请求,获取对应的地区数据,并动态生成地区选项。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值