select 하단 생성, 3 레벨 연동

단일 드롭다운 상자 생성

/**
 * select    
 * var html =
 *   $.divselect("#province", "#inputprovince");
 *      html+= '
';
 *      html+= ' ';
 *      html+= '
';
 *      html+= '
';
 *      html+= '';
 */

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();
    });
};

3 레벨 연동 드롭다운 상자

html:
popup += '
';
popup += ' ';
popup += '
';
popup += '
';

popup += '
';
popup += ' ';
popup += '
';
popup += '
';

popup += '
';
popup += ' ';
popup += '
';
popup += '
';

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 += '
+ val.id + '">' + val.name + '';
    })
    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 += '
+ val.id + '">' + val.name + '';
    })
    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 {
    }

}