select下拉生成,三级联动

单个下拉框生成

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

    三级联动下拉框

    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 { } }

          你可能感兴趣的:(前端js技术,问题集合)