設置數據排列的選項類

Question

我有兩個下拉菜單（狀態和縣），它們控制包含城市信息的div的顯示。縣菜單爲所有城市div生成選項，但重複選項在文檔準備就緒時被濾除。這方面工作正常，如在這裏的jsfiddle：

https://jsfiddle.net/ph68fxya/

什麼完全不起作用躲在當選擇一個特定的狀態不相關縣選項。我有一個函數，我已經包括了之後，但它不會工作，直到我可以找出如何在縣菜單選項中設置stateValues的類。我知道我必須循環，但我無法弄清楚如何做到這一點。任何幫助將非常感激。謝謝。

$(document).ready(function() { 
var stateValues = []; 
var countyValues = []; 
$("div.city").each(function (index, elem) { 
    stateValues.push($(this).data("state")); 
    countyValues.push($(this).data("county")); 
}); 
var uniqueValues = []; 
$(countyValues).each(function (index, item) { 
    if ($.inArray(item, uniqueValues) == -1) uniqueValues.push(item); 
}); 
$(uniqueValues).each(function (index, item) { 
    $("#county").append($("<option class='"+stateValues+"'>").html(item)); 
}); 
}); 

這裏是附加功能，一旦選擇類定義了應工作：

$.conditionalize = function(state,county){ 
var counties = view.children().clone();  
state.change(function(){ 
    var chooseState = $(this).val();     
    view.children.not((".chooseState")).remove(); 
    counties.clone().filter("."+counties).appendTo(county); 
}).trigger("change"); 
} 
$.conditionalize($("#state"),$("#county")); 

Answer 1

試試這個。這將根據狀態過濾您的縣。

$(document).ready(function() { 
     var stateValues = []; 
     var countyValues = []; 
     var countyState = {}; 
     $("div.city").each(function (index, elem) { 
      stateValues.push($(this).data("state")); 
      countyValues.push($(this).data("county")); 
      countyState[$(this).data("county")] = $(this).data("state"); 
     }); 
     var uniqueValues = []; 
     $(countyValues).each(function (index, item) { 
      if ($.inArray(item, uniqueValues) == -1) uniqueValues.push(item); 
     }); 
     $(uniqueValues).each(function (index, item) { 
      $("#county").append($("<option class='" + countyState[item] + "'>").html(item)); 
     }); 

     $("#state").change(function() 
     { 
      var val = $(this).val(); 
      $("#county option").each(function() 
      { 
       if($(this).attr("class") != val) 
        $(this).hide(); 
       else 
        $(this).show(); 
      });    
     }); 


    }); 

https://jsfiddle.net/ph68fxya/2/

Answer 2

我會做這樣的事情來設置課程。用一個對象跟蹤哪個縣屬於哪個州。然後，當您爲郡選擇字段創建選項時，請使用該對象查找該選項屬於哪個狀態。

小提琴：https://jsfiddle.net/ph68fxya/1/

$(document).ready(function() { 
    var stateValues = []; 
    var countyValues = []; 
    // Initialize object 
    var countyState = {}; 
    $("div.city").each(function (index, elem) { 
     stateValues.push($(this).data("state")); 
     countyValues.push($(this).data("county")); 
     // For each county add its state to object 
     countyState[$(this).data("county")] = $(this).data("state"); 
    }); 
    var uniqueValues = []; 
    $(countyValues).each(function (index, item) { 
     if ($.inArray(item, uniqueValues) == -1) uniqueValues.push(item); 
    }); 
    $(uniqueValues).each(function (index, item) { 
     // As you create county option find its state in object 
     $("#county").append($("<option class='" + countyState[item] + "'>").html(item)); 
    }); 
});