jQuery-JSON选项过滤器

Question

我创建了这个JSON业务目录，并帮助我的国家下拉筛选器根据相关的JSON字段内容动态生成。现在，我正试图为state和city字段复制此函数。

我可以让字段正确填充，但它们不起作用，列表中出现空字段的问题就成了问题(很多空格)。我尝试了在选项字段值上进行条件切换，但不起作用。

我的目标是在选择一个国家之前，使州和市的下拉列表不可选择，然后其他两个字段都可以选择，并且只能由所选国家中项目的字段填充。也许我想做的太多了，但我一整天都在努力，不得不放弃一切，再试一次。如果有人能给我指明正确的方向，我将非常感谢你在这方面的帮助！

jQuery(document).ready(function(){
jQuery("#countryFilter, #stateFilter, #cityFilter, #customsFilter, #originalsFilter, #orderFilter").on("change",function(){
var country = jQuery("#countryFilter").val().toLowerCase();
var country = jQuery("#stateFilter").val().toLowerCase();
var country = jQuery("#cityFilter").val().toLowerCase();
var customs = jQuery("#customsFilter").is(":checked");
var originals = jQuery("#originalsFilter").is(":checked");
var order = jQuery("#orderFilter").is(":checked");
var selector = "";
if (country != "all") selector += ".filter-country-" + country;
if (customs) selector += ".filter-customs";
if (originals) selector += ".filter-originals";
if (order) selector += ".filter-order";
if (selector.length == 0)
selector = ".LD_item_wrap";
else
selector = ".LD_item_wrap" + selector;
jQuery(".LD_item_wrap").hide();
jQuery(selector).show();
		});
jQuery.getJSON("https://api.myjson.com/bins/it5hh.json", function(data){
jQuery.each(data, function(i, field) {
var name = field.NAME;
var url = field.URL;
var customs = field.CUSTOMS;
var ones = field.ONE_OFFS;
var originals = field.ORIGINAL_MODELS;
var order = field.ORDER_ONLINE;
var city = field.CITY;
var state = field.STATE;
var country = field.COUNTRY;
var luthier = field.LUTHIER;
var email = field.EMAIL;
var tel = field.TEL;
var store = field.STORE;
var info = field.INFO;
var specialty = field.SPECIALTY;
var school = field.SCHOOL;
var classString = "filter-country-" + country.toLowerCase();
if (customs == "Yes") classString += " filter-customs";
if (originals == "Yes") classString += " filter-originals";
if (order == "Yes") classString += " filter-order";
var uniqueElements = []
function CheckIfExists(field) {
var exists = false;
jQuery.each(uniqueElements, function (i2, field2) {
if (field2.COUNTRY == field.COUNTRY) {
exists = true;
return true;
};
});
return exists;
}
jQuery.each(data, function (i, field) {
if (!CheckIfExists(field)) {
uniqueElements.push(field)
}
});
jQuery('#countryFilter').empty();
jQuery('#countryFilter').append(jQuery('<option>', {
value : 'All',
text : 'All'
}))
jQuery.each(uniqueElements, function (i, item) {
jQuery('#countryFilter').append(jQuery('<option>', {
value : item.COUNTRY,
text : item.COUNTRY
}));
});
jQuery("#show-data").append("<div class='LD_item_wrap " + classString + "'>  <div class='LD_1'><h3>" + name + "</h3></div><div class='LD_2'>" + "<a class='LD_lnk' rel='nofollow' href='" + url + "'" + "target='_blank'>" + url + "</a>" + "</div>  <div class='LD_lctn'><div class='LD_7'>" + city + "</div><div class='LD_8'>" + state + "</div><div class='LD_9'>" + country + "</div>  </div><div class='LD_3'>Custom Builds?<span>" + customs + "</span></div><div class='LD_4'>One-Offs?<span>" + ones + "</span></div><div class='LD_5'>Original Models?<span>" + originals + "</span></div><div class='LD_6'>Order Online?<span>" + order + "</span></div>  <div class='LD_cntct_div'>Contact Details</div>  <div class='LD_cnt_cnt'>  <div class='LD_10'><sup>Luthier</sup><span>" + luthier + "</span></div>    <div class='LD_11'><sup>Email</sup><span>" + "<a class='LD_MF' href='mailto:" + email + "' target='_top'>" + email + "</a></span>" + "</div><div class='LD_12'><sup>Tel</sup><span>" + tel + "</span></div> <div class='LD_13'><sup>Shop</sup><span>" + store + "</span></div>  <div class='LD_14'><sup>Info</sup><span>" + info + "</span></div>  <div class='LD_15'><sup>Specialty</sup><span>" + specialty + "</span></div><div class='LD_16'><sup>School/Course</sup><span>" + school + "</span></div></div></div>");
});
jQuery('.LD_MF').each(function() {
var that = jQuery(this);
that.attr('href', that.attr('href').replace('[x.x]', '.').replace('[x..x]', '@'));
that.html(that.html().replace('[x.x]', '.').replace('[x..x]', '@'));
});
var check = jQuery('.LD_item_wrap div');
for (var i = 0; i <= check.length; i++) {
if (jQuery(check[i]).text() == '') {
jQuery(check[i]).css('display', 'none');
}
}
var check3 = jQuery('.LD_item_wrap div span');
var check2 = check3.parent();
for (var i = 0; i <= check3.length; i++) {
if (jQuery(check3[i]).text() == '') {
jQuery(check2[i]).css('display', 'none');
}
}
var yn = jQuery('.LD_item_wrap div span');
for (var i = 0; i <= yn.length; i++) {
if (jQuery(yn[i]).text() == 'Yes') {
jQuery(yn[i]).html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"><g><g><polygon points="293.333,135.04 190.08,240.213 137.173,187.093 108.8,215.467 192.213,298.667 326.187,168.747   " fill="#91DC5A"/></g></g><g><g><path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#91DC5A"/></g></g></svg>');
}
}
for (var i = 0; i <= yn.length; i++) {
if (jQuery(yn[i]).text() == 'No') {
jQuery(yn[i]).html('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" width="15px" height="15px"><g><g><polygon points="303.147,153.813 272.853,123.52 213.333,183.253 153.813,123.52 123.52,153.813 183.253,213.333 123.52,272.853     153.813,303.147 213.333,243.413 272.853,303.147 303.147,272.853 243.413,213.333   " fill="#666666"/></g></g><g><g><path d="M213.333,0C95.513,0,0,95.513,0,213.333s95.513,213.333,213.333,213.333s213.333-95.513,213.333-213.333    S331.154,0,213.333,0z M213.333,388.053c-96.495,0-174.72-78.225-174.72-174.72s78.225-174.72,174.72-174.72    c96.446,0.117,174.602,78.273,174.72,174.72C388.053,309.829,309.829,388.053,213.333,388.053z" fill="#666666"/></g></g></svg>');
}
}
jQuery('.LD_14').hide();          
jQuery('#LD_aSub').click(function(){
jQuery('#LD_subWrap').fadeIn();
jQuery('#show-data').hide();
});
jQuery('#LD_subExit').click(function(){
jQuery('#LD_subWrap').fadeOut();
jQuery('#show-data').show();
});
});
});

/*
https://www.electricherald.com/json/luthierDir.json 
https://api.myjson.com/bins/it5hh.json
*/
.td-post-header {
background:url(https://www.electricherald.com/wp-content/uploads/2017/01/A019-Facebook-Image-1.jpg);
}
.td-post-header:after {
background:rgba(255,255,255,.5);
}
@media (max-width: 1018px) {
h1 {color:#000;background:rgba(255,255,255,.5);}
}
@media (min-width: 1019px) {
h1 {color:#000;background:rgba(255,255,255,.8);}
}
@media (max-width: 739px) {
#LD_LD_WrapWrap {height: 714px; padding:10px; margin: 20px 0px; border:1px #ccc solid; border-radius:20px;}
#LDWrap {font-family:Lato; color:#666; height:550px; width:100%;}
#LD_subWrap {display:none; width:calc(100% - 20px); position:absolute; z-index:1000; background:#fff; overflow-y:scroll; overflow: -moz-scrollbars-vertical; height:662px;}
#LDX {width:100%; padding:0; margin:0; text-align:center;}
#LDX h2 {color:#cc4c4c; text-transform: uppercase; font-size:20px; text-shadow:2px 2px 1px #ddd; font-family:Lato; line-height:20px; margin-top:12px;} 
#LDMen {padding:0; margin:0; background:#fafafa;}
#LDMen h4 {color:#000; font-size:14px; text-transform:uppercase; padding:0; margin:0 0 2px 0; border-bottom:1px #666 solid;}
#LD_filters {text-align:center; padding:0; margin:12px 0 0 0; font-size:14px; line-height:14px;} 
#LD_subPrompt h5 {text-align:center; padding:0; margin:10px 0 0 0;font-size:12px; text-}
#LD_subPrompt h5:before {content:'*Luthiers & Guitar Makers: ';}
#LDInf {margin-top:20px;height:auto;}
#LDINRES {display:block; color:#000; font-size:14px; text-transform:uppercase; padding:0; margin:0 0 2px 0; border-bottom:1px #666 solid;}

.LD_item_wrap {background:#fafafa; margin:10px 0; padding:10px;}
.LD_1 h3 {color:#cc4c4c; font-size:20px; padding:4px 0; margin:8px 0; border-bottom:1px rgba(0,0,0,.05) dotted;}
.LD_2 a {text-decoration:none; color:#000; font-weight:bold; margin:0 5px; font-size:11px; line-height:12px;}
.LD_2 a:hover {text-decoration:none; color:#cc4c4c;}
.LD_2 a:active {color:#fff;}
.LD_lctn > * {display:inline-block; margin:4px 5px;color:#000;}
.LD_7:after, .LD_8:after {content:',';}

.LD_lctn, .LD_2, .LD_3, .LD_4, .LD_5, .LD_6 {text-transform:uppercase; font-size:12px; }
.LD_3, .LD_4, .LD_5, .LD_6 {margin:3px 10px; line-height:14px; max-width:280px; border:1px #fafafa solid;}
.LD_3 span, .LD_4 span, .LD_5 span, .LD_6 span {margin-left:20px; float:right;}
.LD_cntct_div {margin:20px 0 10px 10px; font-size:12px; font-weight:bold; border-bottom:1px rgba(0,0,0,.05) dotted;}
.LD_cnt_cnt > div {padding:0; font-size:14px; color:#000; max-width:350px; border:1px #fafafa solid; height:26px;}
.LD_cnt_cnt > div sup {float:left;}
.LD_cnt_cnt > div span {float:right;}
.LD_11 > span a {color:#000; text-decoration:none;}
.LD_11 > span a:hover {color:#cc4c4c;}
.LD_11 > span a:active {color:#fff;}
#show-data {height:414px; overflow-y:scroll; overflow: -moz-scrollbars-vertical;}
#LD_scrl {text-align:center; text-transform:uppercase; font-size:12px; color:#cc4c4c; padding:2px 0;}
#LD_subExit {height:25px; width:25px; position:absolute; top:0px; right:12px; box-shadow:1px 1px 1px #ccc; border-radius:20px; opacity:.7; background: url(https://www.electricherald.com/directoryFiles/X.svg);  z-index:9999; background-size:contain;background-position:center; background-repeat:no-repeat;}
#LD_subExit:hover {opacity:1;}
#LD_subExit:active {box-shadow:1px 1px 3px #000 inset;}
.radio:children {display:inline-block;}
#f7, #f8, #f9, #f10, #f11, #f12 {margin:0 6px;}
label.control-label {margin:0 4px;}
#LDLabel1 {font-size:18px; color:#cc4c4c; text-align:center; width:100%;}
p.description {font-size:9px; text-transform:uppercase; margin-top:0px; color:#ccc;}
.color_span {color:#cc4c4c;}
input.form-control1, textarea.txt_area1 {width:400px; margin:2px; height:24px; outline:none; border:1px #666 solid;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
border-radius:2px; padding-left:4px;}
input.form-control2 {width:300px; margin:2px; height:24px; outline:none; border:1px #666 solid;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
border-radius:2px; padding-left:4px;}
input.form-control1:focus, input.form-control2:focus, textarea.txt_area1:focus {border:1px #cc4c4c solid;}
.dbl_col {display:inline-block; width:40% !important;}
.dbl_col2nd {margin-left:50px;}
.form-group {text-transform:uppercase;font-size:14px; padding:10px 0;}
.form-group2 {padding:10px 0;}
.DLfrm_titlh5 {margin:10px 0; padding-left:4px; font-size:16px;}
textarea.txt_area1 {height:60px !important; width:80%; resize:none;}
}
@media (min-width: 740px) {
#LD_LD_WrapWrap {height: 550px; margin: 20px 0px;}
#LDINRES {display:none;}
#LDWrap {border:1px #666 solid; width:735px; height:500px; margin:0; padding:0; border-radius:20px; box-shadow:1px 1px 1px #ccc; font-family:Lato; color:#666; z-index:20; position:absolute; left:calc(50% - (735px / 2));}
#LDX {width:736px; height:50px; text-align:center;}
#LDX h2 {font-size:24px; text-transform:uppercase; padding:0; margin:0; line-height:50px; font-weight:bold; color:#666; text-shadow:1px 1px 1px #ccc;}
#LDX h2 span {color:#cc4c4c;}
#LDMen {width:130px; height:450px; float:left; padding:0px 10px;}
#LDInf {width:585px; height:450px; float:left;}
#LD_scrl {width:100%; text-align:center; line-height:20px;font-size:12px;color:#ccc;}
#LD_filters {font-size:12px;padding:4px;}
#LD_filters select {display:block;padding:0;outline:none;}
#cityFilter {margin-bottom:-10px;}
#LD_filters span {margin-left:6px;}
#LD_filters > input {margin:0 4px 0 15px;}
#LD_filters > * {display:inline-block;margin:4px 0; line-height:10px;}
#LDMen h4 {color:#cc4c4c;text-align:center;}
#show-data {height:calc(100% - 48px); overflow-y:scroll; overflow: -moz-scrollbars-vertical; margin:10px; padding:5px; background:#fafafa;}

.LD_item_wrap a {color:#000;text-decoration:none;}
.LD_item_wrap a:hover {color:#cc4c4c;}
.LD_item_wrap a:active {color:#fff;}
.LD_item_wrap {margin:20px auto; width:calc(100% - 12px); height:auto;border:1px #ccc dotted;padding:5px; background:#fff;}
.LD_item_wrap div {margin:0;padding:0; line-height:20px;}
.LD_item_wrap div span svg {margin-right:10px; float:right;}
.LD_cntct_div {width:100%; border-bottom:1px #ccc dotted;margin:10px 0px 5px 0px !important; color:#ccc; font-size:12px; text-align:center;}
.LD_cnt_cnt {text-align:center;}
.LD_cnt_cnt sup {float:left;font-size:9px;line-height:20px;text-transform:uppercase;}
.LD_1 {text-align:center;}
.LD_1 h3 {font-weight:bold; margin:0; color:#cc4c4c;}
.LD_2 {font-size:12px; text-align:center;}
.LD_lctn {text-align:center; font-size:12px; text-transform:uppercase; margin-bottom:3px !important; font-weight:bold;}
.LD_7 {display:inline-block;}
.LD_7:after {content:'•';padding:0 4px;}
.LD_8 {display:inline-block;}
.LD_8:after {content:'•';padding:0 4px;}
.LD_9 {display:inline-block;}
.LD_3,.LD_4,.LD_5,.LD_6 {text-transform:uppercase; font-size:12px;}
.LD_10 {}
.LD_11 {font-size:12px;}
.LD_12 {}
.LD_13 {}
.LD_14 {}
.LD_15 {}
.LD_16 {}


/*Submission*/
#LD_subPrompt {padding-top:90px;}
#LD_subPrompt h5 {text-align:center; font-size:11px; line-height:16px; font-weight:bold; text-transform:uppercase; color:#666;}
#LD_subWrap {height:calc(100% + 2px); width:calc(100% + 2px); background:#fff; z-index:5000; position:absolute; top:-1px; left:-1px; border:1px #666 solid; border-radius:20px; overflow-y:scroll; overflow: -moz-scrollbars-vertical; display:none;}
#LD_subForm {width:calc(100% - 20px); padding:10px;}
#LD_subExit {height:25px; width:25px; position:absolute; top:10px; right:10px; box-shadow:1px 1px 1px #ccc; border-radius:20px; opacity:.7; background: url(https://www.electricherald.com/directoryFiles/X.svg); background-size:contain;background-position:center; background-repeat:no-repeat;}
#LD_subExit:hover {opacity:1;}
#LD_subExit:active {box-shadow:1px 1px 3px #000 inset;}
.radio:children {display:inline-block;}
#f7, #f8, #f9, #f10, #f11, #f12 {margin:0 6px;}
label.control-label {margin:0 4px;}
#LDLabel1 {font-size:18px; color:#cc4c4c; text-align:center; width:100%;}
p.description {font-size:9px; text-transform:uppercase; margin-top:0px; color:#ccc;}
.color_span {color:#cc4c4c;}
input.form-control1, textarea.txt_area1 {width:400px; margin:2px; height:24px; outline:none; border:1px #666 solid;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
border-radius:2px; padding-left:4px;}
input.form-control2 {width:300px; margin:2px; height:24px; outline:none; border:1px #666 solid;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
border-radius:2px; padding-left:4px;}
input.form-control1:focus, input.form-control2:focus, textarea.txt_area1:focus {border:1px #cc4c4c solid;}
.dbl_col {display:inline-block; width:40% !important;}
.dbl_col2nd {margin-left:50px;}
.form-group {text-transform:uppercase;font-size:14px; padding:10px 0;}
.form-group2 {padding:10px 0;}
.DLfrm_titlh5 {margin:10px 0; padding-left:4px; font-size:16px;}
textarea.txt_area1 {height:60px !important; width:80%; resize:none;}
}
#customsFilter, #originalsFilter, #orderFilter {margin-right:5px;}
div.submit_btn1 {width:70px;margin-left:auto;margin-right:auto;}
button.btn-primary {outline:none; height:24px; width:55px; line-height:18px; text-align:center; font-weight:bold; border:1px #666 solid; font-size:11px; border-radius:2px; background:#fafafa; box-shadow:1px 1px 1px #ccc;}
button.btn-primary:hover {color:#cc4c4c; border:1px #cc4c4c solid;}
button.btn-primary:active {box-shadow:1px 1px 1px #666 inset;}
#LD_aSub {text-decoration:none; color:#cc4c4c; cursor:pointer;}
#LD_aSub:hover {color:#000;}
#LD_aSub:active {color:#ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="LD_LD_WrapWrap">
<div id="LDWrap">
<div id="LD_subWrap">
<div id="LD_subExit"></div>
<!-- ---------------------------------- -->
<div id="LD_subForm"><form id="LDsub" action="https://www.electricherald.com/directoryFiles/LDMail.php" autocomplete="on" enctype="multipart/form-data" method="post" name="LDsub" novalidate=""><input name="method" type="hidden" value="validateForm" /><input id="serverValidationFields" name="serverValidationFields" type="hidden" value="" /><div class="form-group2" style="margin: none;">
<h4 id="LDLabel1">Directory Submission</h4><div class="radio" style="width: 50%; float: left; display: inline-block;"><input id="fx1" style="float: left; width: 20px; margin-top: 6px;" name="f1" type="radio" value="NEW" /><label style="float: left;" for="fx1">I want to submit a new business.</label></div>
<div class="radio" style="width: 50%; display: inline-block;"><input id="fx2" style="float: left; width: 20px; margin-top: 6px;" name="f1" type="radio" value="EDIT" /><label style="float: left;" for="fx2">I want to edit a current listing.</label></div></div><div class="form-group"><label class="control-label" for="f2">Business Name<span class="color_span"> *</span></label><input id="f2" class="form-control1" name="f2" type="text" value="" placeholder="Feigndor Guitars" data-rule-required="true" /><p class="description">This is your public business/company/brand name, not your personal name.</p></div><div class="form-group"><label class="control-label" for="f3">Web Address</label><input id="f3" class="form-control1" name="f3" type="url" value="" placeholder="http://www.feigndor.com" data-rule-url="true" /></div><div class="form-group required dbl_col"><label class="control-label" for="f4">City<span class="color_span"> *</span></label><input id="f4" class="form-control2" name="f4" type="text" value="" data-rule-required="true" /></div><div class="form-group required dbl_col dbl_col2nd"><label class="control-label" for="f5">State or Province<span class="color_span"> *</span></label><input id="f5" class="form-control2" name="f5" type="text" value="" data-rule-required="true" /></div><div class="form-group required"><label class="control-label" for="f6">Country<span class="color_span"> *</span></label><select id="f6" class="form-control2" name="f6" data-rule-required="true">
<option value="United States">United States</option>
</select></div>
<div class="form-group2">
<h5 class="DLfrm_titlh5">Service Information</h5>
<div class="checkbox"><input id="f7" name="f7" type="checkbox" value="CUSTOMS" /><label for="f7">We build custom guitars.</label></div>
<div class="checkbox"><input id="f8" name="f8" type="checkbox" value="ONE_OFFS" /><label for="f8">Our custom designs are not limited (one-off builds).</label></div>
<div class="checkbox"><input id="f9" name="f9" type="checkbox" value="ORIGINAL_MODELS" /><label for="f9">We have original instrument models.</label></div>
<div class="checkbox"><input id="f10" name="f10" type="checkbox" value="ORDER_ONLINE" /><label for="f10">Customers can order our instruments online (complete transaction + shipping).</label></div>
<div class="checkbox"><input id="f11" name="f11" type="checkbox" value="REPAIRS" /><label for="f11">We perform service &amp; repairs.</label></div>
<div class="checkbox"><input id="f12" name="f12" type="checkbox" value="SHOP" /><label for="f12">We have a brick and mortar shop.</label></div>
</div>
&nbsp;
<div class="form-group"><label class="control-label" for="f13">Head Luthier's Name</label><input id="f13" class="form-control2" name="f13" type="text" value="" placeholder="Jiminy Cricket" /><p id="f13-help-block" class="description">*Full name please.</p></div><div class="form-group dbl_col"><label class="control-label" for="f14">Phone Number</label><input id="f14" class="form-control2" name="f14" type="tel" value="" placeholder="123-456-7890" /><p id="f14-help-block" class="description">Include country code if you're outside of the USA.</p></div><div class="form-group f15 required dbl_col dbl_col2nd"><label class="control-label" for="f15">Email<span class="color_span"> *</span></label><input id="f15" class="form-control2" name="f15" type="email" value="" data-rule-email="true" data-rule-required="true" /><p id="f15-help-block" class="description">Our site prevents bots from sending you spam.</p></div><div class="form-group"><label class="control-label" for="f16">Do you operate a lutherie school, or offer courses / training?</label>
<textarea id="f16" class="form-control1 txt_area1" name="f16" rows="3"></textarea></div><div class="form-group"><label class="control-label" for="f17">Does your business have a particular focus or specialty?</label><input id="f17" class="form-control1" name="f17" type="text" value="" /><p id="f17-help-block" class="description">Leave this blank if you are a jack of all trades.</p></div><div class="form-group submit submit_btn1" style="position: relative;"><button class="btn btn-primary btn-lg" style="z-index: 99999;" type="submit">Submit</button></div>
</form></div>
<!-- ----------------------------------------------- -->
</div>
<div id="LDX">
<h2>Custom Guitar Builders Directory</h2>
</div>
<div id="LDMen">
<h4>Filter Results</h4>
<div id="LD_filters">Country:
<select id="countryFilter"></select>
<select id="stateFilter"></select>
<select id="cityFilter"></select>
<input id="customsFilter" name="filt_customs" type="checkbox" value="customs" />Custom Builds
<input id="originalsFilter" name="filt_originals" type="checkbox" value="originals" />Original Models
<input id="orderFilter" name="filt_orders" type="checkbox" value="orders" />Online Orders</div>
<!---filters--->
<div id="LD_subPrompt">
<h5>Submit / Edit Your Business Information <span id="LD_aSub">Here</span>.</h5>
</div>
</div>
<div id="LDInf">
<h4 id="LDINRES">RESULTS:</h4>
<div id="show-data"></div>
<div id="LD_scrl">Scroll Down</div>
</div>
</div>
</div>

Answer 1

我从零开始编写了一些受所描述问题影响的HTML代码。我希望它能像您所期望的那样解决您的问题，并且您可以发现将它集成到应用程序代码中很容易。

我的目标是在国家被选中，那么其他两个领域都将成为可供选择，并且仅由中的字段填充所选国家/地区的项目。

从技术上讲，以下代码不会使下拉列表不可选择，因为它不会禁用它。但我不知道这是必须的，还是简单地清空它就可以了。

function getByKey(data, key, target) {
var result = [];
$(target).append($('<option>',{"id": '', "text": '- select one -'}));
data.forEach(function(obj, idx, list) {
if (obj[key] == '') obj[key] = '- empty -';
if (typeof (result[obj[key]]) == 'undefined') {
$(target).append($('<option>',{"id": obj[key], "text": obj[key]}));
result[obj[key]] = [];
}
result[obj[key]].push(obj);
});
return result;
}
var main = function(jsonURL) {
jQuery.getJSON(jsonURL, function(data){ 

var States = [];
var Cities = [];
var Countries = getByKey(data, 'COUNTRY', '#countryFilter');

$('#countryFilter').on('change', function(e) {

$('#stateFilter').empty();
$('#cityFilter').empty();

if ($(this).val() == '- select one -') return null;

var country = ($(this).val()=='')?'- empty -':$(this).val();
States = getByKey(Countries[country], 'STATE', '#stateFilter');

});

$('#stateFilter').on('change', function(e) {

$('#cityFilter').empty();

if ($(this).val() == '- select one -') return null;

var state = ($(this).val()=='')?'- empty -':$(this).val();
Cities = getByKey(States[state], 'CITY', '#cityFilter');

});

});
}("https://api.myjson.com/bins/it5hh.json");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="LDMen">
<h4>Filter Results</h4>
<div id="LD_filters">Country:
<select id="countryFilter"></select>
<select id="stateFilter"></select>
<select id="cityFilter"></select>
<input id="customsFilter" name="filt_customs" type="checkbox" value="customs" />Custom Builds
<input id="originalsFilter" name="filt_originals" type="checkbox" value="originals" />Original Models
<input id="orderFilter" name="filt_orders" type="checkbox" value="orders" />Online Orders
</div>
<!---filters--->
<div id="LD_subPrompt">
<h5>Submit / Edit Your Business Information <span id="LD_aSub">Here</span>.</h5>
</div>
</div>