jQuery - JSON Option Filters - 優秀な図書館

私はこのJSONビジネスディレクトリを作成し、関連するJSONフィールドコンテンツに基づいて私の国のドロップダウンフィルタを動的に生成するのに役立ちます。今、私は州と都市のフィールドのためにこの関数を複製しようとしています。jQuery - JSON Option Filters

フィールドを正しく取り込むことはできますが、機能しないため、リストに表示される空のフィールドの問題が問題になります（大量の空白）。私は、オプションフィールド値の条件付きトグルを試みましたが、それはうまくいかないでしょう。

私の目標は、国が選択されるまで州と市のドロップダウンを選択解除できるようにすることです。選択した国の項目のフィールドだけが選択できるようになります。たぶん私はあまりにも多くをやろうとしていますが、私は一日中この作業を続けてきたので、すべてを破棄してやり直してください。誰かが正しい方向に私を指すことができる場合は、私はこの1つであなたの助けに大変感謝します！

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

 
     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>

出典

2017-02-03 Joel

Iは、コードの量が初めてで掘りものとビット圧倒的かもしれないと思います。問題の一部ではないものをすべて削除し、問題を最小限のコードに減らすと、おそらく多くの回答が得られます。問題に直面するとき、これはまた自分自身にとって有益です。 –

ええ、あなたはおそらく正しいでしょう - それは最初に働いていた間にこれに対処していたはずですが、国のリスト機能を自分で複製できると思いました。 – Joel

私はゼロからスタートして説明した問題の影響を受け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>

出典

2017-02-03 18:46:01

階層問題に対処してくれてありがとう！私は混乱した結果であなたの機能を完全なコードに入れようとしていました。元のコードの国フィールドへの参照を削除して新しいコードで作業するのは苦労しています。実際にデータをウィンドウに表示するには、コード全体の中の良い部分が必要です。あなたのコードではいくつかのドロップダウンが表示されますが、国レベルの後でデータのフィルタリングは行われません： '（ – Joel

jQuery - JSON Option Filters

答えて

関連する問題