基於先前的選擇下拉

Question

感謝您閱讀我的問題顯示隱藏選擇選項... ;-)

我建立一個使用自定義信息和自定義字段，以顯示車輛庫存WordPress站點。我希望訪問者能夠按照分類法篩選帖子...

我用於鑽取可用分類法（查詢多分類法）的插件將其可以找到的特定分類法的所有選項輸出到下拉列表中。

爲了防止下拉列表（即模型）變得太長，我只想顯示那些基於上一次選擇的選項。

所以當訪問者選擇Vehicle = Cars時，製造商的下拉菜單應該只顯示汽車製造商。 當訪問者選擇製造商（即福特）時，選擇模型的下一個下拉列表應僅顯示前一選定製造商可用的模型，在這種情況下爲福特...

標籤和0級值不會'不會改變，但當我添加或更換製造商或型號時，1級和/或2級會發生變化。

不是那麼重要，但如果可能的話，它也將很好去除不需要顯示在「過濾」下拉菜單中的所有內容。在製造商下拉的情況下，0級和所有空間都不需要。 如果選擇「型號」下拉菜單，則不需要級別0，級別1和所有空格。

下面是一個示例的HTML代碼，由插件生成的，怎麼看起來像：

<label for="qmt-vehicle">Vehicle:</label> 
<select id="qmt-vehicle" name="vehicle"> 
    <option></option> 
    <option class="level-0" value="cars" >Cars</option> 
    <option class="level-0" value="motorcycles" >Motorcycles</option> 
</select> 

<label for="qmt-manufacturer">Manufacturer:</label> 
<select id="qmt-manufacturer" name="manufacturer"> 
    <option></option> 
    <option class="level-0" value="cars" >Cars</option> 
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option> 
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option> 

    <option class="level-0" value="motorcycles" >Motorcycles</option> 
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option> 
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option>  
</select> 

<label for="qmt-model">Model:</label> 
<select id="qmt-model" name="model"> 
    <option></option> 
    <option class="level-0" value="cars" >Cars</option> 
    <option class="level-1" value="ford" >&nbsp;&nbsp;&nbsp;Ford</option> 
    <option class="level-2" value="model-1-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option> 
    <option class="level-2" value="model-2-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option> 
    <option class="level-2" value="model-3-ford" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option> 
    <option class="level-1" value="chevrolet" >&nbsp;&nbsp;&nbsp;Chevrolet</option> 
    <option class="level-2" value="model-1-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option> 
    <option class="level-2" value="model-2-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option> 
    <option class="level-2" value="model-3-chevrolet" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option>  

    <option class="level-0" value="motoren" >Motorcycles</option> 
    <option class="level-1" value="honda" >&nbsp;&nbsp;&nbsp;Honda</option> 
    <option class="level-2" value="model-1-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option> 
    <option class="level-2" value="model-2-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option> 
    <option class="level-2" value="model-3-honda" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option> 
    <option class="level-1" value="yamaha" >&nbsp;&nbsp;&nbsp;Yamaha</option> 
    <option class="level-2" value="model-1-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 1</option> 
    <option class="level-2" value="model-2-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 2</option> 
    <option class="level-2" value="model-3-yamaha" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Model 3</option> 
</select> 

我可以做的JavaScript一些簡單的事情，但是，這不是簡單的我，對不起...; - ）

有人可以幫我弄清楚如何在Javascript/JQuery中做到這一點？ 跨瀏覽器會很棒！

*編輯* 的HTML代碼顯示的代碼發送到瀏覽器。因爲我無法修改這個插件，所以我想「操作」這段代碼，使其按照我想要的方式工作...... ;-) 唯一修正的問題是：下拉列表和所有值的標籤Class =「level-0」元素。

所以「汽車」和「摩托車」將永遠保持不變。但從那裏一切都是靈活的改變。即當沒有Chevy的帖子可顯示時，Chevy將不會生成HTML。所以這個插件只顯示那些真正可以找到的項目的下拉選項。 所以，當沒有福特可用，福特將不會在下拉...

我寧可不做預定義的製造商和他們的模型列表。

Answer 1

訂閱您的select元素'onchange事件：http://www.w3schools.com/jsref/event_onchange.asp。在事件處理程序中，讀取當前選定的值並相應地重新填充其他元素。

Answer 2

我建議你在JavaScript中保存數據，所以你只需要顯示每個模型的必要選項，而不必隱藏一些..

我把這個放在jsfiddle上，但網站不斷。 下面的代碼已經過測試並可以正常工作。

現在好作品：

<script type="text/javascript"> 
var vehicles = {"Cars": { 
      "Ford" : [ "Fiesta", "Focus", "Fusion"], 
      "Chevy": [ "Malibu", "Corvette", "Tahoe"], 
      }, 
"Motorcycles": { 
     "Honda": ["model 1", "model 2", "model 3"], 
     "Yamaha": ["model 1", "model 2", "model 3", "model 4"] 
    } 
}; 


$(document).ready(function() { 
    var $vehiclesList = $("#qmt-vehicle"); 
    var $manufList = $("#qmt-manufacturer"); 
    var $modelList = $("#qmt-model"); 
    var selectedType = null 
    var selectedManuf = null; 
    $.each(vehicles, function(key, vehicle) { 
    $vehiclesList.append($("<option/>", {value:key,text:key})); 
    }); 

    $vehiclesList.bind("change", function() { 
    selectedType = $(this).val(); 
    if (selectedType && vehicles[selectedType]) { 
     var manufacturers = vehicles[selectedType]; 
     $("#qmt-manufacturer option").not(":first").remove(); 
     $("#qmt-model option").not(":first").remove(); 
     $.each(manufacturers, function(key, manufacturer) { 
     $manufList.append($("<option/>", { value: key, text: key})); 
     }); 
    } 
    }); 

$manufList.bind("change", function() { 
    var selectedManuf = $(this).val(); 
    $("#qmt-model option").not(":first").remove(); 
    if (selectedManuf && vehicles[selectedType] && vehicles[selectedType][selectedManuf]) { 
     var models = vehicles[selectedType][selectedManuf];  
     $.each(models, function(key, model) { 
     $modelList.append($("<option/>", { value: model, text: model})); 
     }); 
    } 
    }); 

}); 
</script> 

然後在你的頁面，你就會有

<label for="qmt-vehicle">Vehicle:</label> 
<select id="qmt-vehicle" name="vehicle"> 
    <option></option> 

</select> 

<label for="qmt-manufacturer">Manufacturer:</label> 
<select id="qmt-manufacturer" name="manufacturer"> 
    <option></option> 
</select> 

<label for="qmt-model">Model:</label> 
<select id="qmt-model" name="model"> 
    <option></option> 
</select>