jQuery - JSON Option Filter

Ich habe dieses JSON-Geschäftsverzeichnis erstellt und ein wenig Hilfe, um meinen Länder-Dropdown-Filter basierend auf dem relevanten JSON-Feldinhalt dynamisch generieren zu lassen. Jetzt versuche ich, diese Funktion für den Staat und die Stadtfelder zu kopieren.jQuery - JSON Option Filter

Ich kann die Felder korrekt ausfüllen, aber sie funktionieren nicht und die Angelegenheit von leeren Feldern in der Liste wird ein Problem (viele Leerzeichen). Ich versuchte eine bedingte Umschaltung auf die Option Feld Werte für das aber es würde nicht funktionieren.

Mein Ziel besteht darin, die Dropdown-Liste für Bundesstaat und Stadt nicht auswählbar zu lassen, bis ein Land ausgewählt wurde. Dann können beide anderen Felder ausgewählt werden und nur Felder aus den Elementen des ausgewählten Landes angezeigt werden. Vielleicht versuche ich zu viel zu tun, aber ich habe den ganzen Tag daran gearbeitet und muss immer alles verschrotten und es erneut versuchen. Wenn mir jemand in die richtige Richtung zeigen kann, würde ich Ihre Hilfe bei diesem sehr schätzen!

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>

Quelle

2017-02-03 Joel

Ich denke, die Menge an Code ein wenig überwältigend zu dem einen zum ersten Mal Graben in sein kann. Sie erhalten wahrscheinlich mehr Antworten, wenn Sie alles entfernen, was nicht Teil des Problems ist, und das Problem auf die minimale Menge an Code reduzieren. Wenn es sich um ein Problem handelt, ist dies auch für Sie hilfreich. –

Yeah, du hast wahrscheinlich Recht - ich hätte dies während der ersten Bearbeitung ansprechen sollen, aber ich nahm an, dass ich die Länderlistenfunktion selbst replizieren könnte. – Joel

Ich habe einen Teil der von dem Problem betroffen HTML-Code beschrieben von Grund auf neu zu starten. Ich hoffe, dass es Ihr Problem so behandelt, wie Sie es erwarten, und Sie können es leicht in Ihren Anwendungscode integrieren.

Mein Ziel ist es, den Staat zu haben, und Stadt-Dropdown-Listen un wählbar, bis ein Land gewählt wird - dann die beiden anderen Felder würden verfügbar werden zur Auswahl, und nur von Feldern aus Elementen gefüllt werden in das ausgewählte Land.

Technisch macht der folgende Code das Dropdown nicht auswählbar, da es es nicht deaktiviert. Aber ich weiß nicht, ob das ein Muss ist, oder es einfach zu leeren macht die Arbeit für dich.

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>

Quelle

2017-02-03 18:46:01

Danke für die Adressierung des Hierarchieproblems! Ich habe versucht, Ihre Funktionen jetzt für etwa drei Stunden in den vollständigen Code zu integrieren, mit verwirrenden Ergebnissen. Es fällt mir schwer, die Verweise auf das Länderfeld im Originalcode zu entfernen und im neuen Code zu arbeiten - es scheint, dass ein guter Teil des Codes erforderlich ist, um die Daten tatsächlich in das Fenster zu bringen. Ihr Code enthält einige Drop-downs, aber nach der Länderebene findet keine Datenfilterung statt: "( – Joel

jQuery - JSON Option Filter

Antwort

Verwandte Themen