顯示隱藏基於Jquery或Javascript中的上一個選擇下拉選擇選項

我正在構建一個使用自定義帖子和自定義字段來顯示車輛庫存的WordPress網站。我希望訪問者能夠按照分類法篩選帖子...顯示隱藏基於Jquery或Javascript中的上一個選擇下拉選擇選項

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

爲了防止下拉列表（即模型）變得太長，我想只顯示是基於先前的選擇這些選項。

所以，當訪問者選擇車輛=汽車，爲製造商下拉應該只顯示汽車製造商。當訪問者選擇的製造商，即福特，選擇一個模型應該只顯示可用於先前所選的製造商的車型，在這種情況下，福特的下一個下拉...

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

不是很重要，但是，如果可能的話，這也將是不錯的剝離不需要的「過濾」下拉列表顯示了一切。在製造商下拉的情況下，0級和所有空間都不需要。在模型下拉列表中，選擇後不需要等級0，等級1和所有空格。

我可以用JavaScript做一些簡單的事情，但這對我來說並不簡單，對不起... ;-) 我搜索了技巧和例子，並試圖使它工作，但沒有運氣。

可有人請幫我找出如何在jQuery的做到這一點？

下面是代碼，

<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>

來源

2014-02-05 Njay_Stephen

讓你的問題的精確，使我們可以把它理解。提供一些小提琴或屏幕截圖鏈接以提高可讀性。 – Praveen

你的嘗試在哪裏？在發佈自己的文章之前，你沒有看到過百個類似的問題嗎 –

和@Praveen一樣，我可以理解你想問什麼。但不明白你想要達到什麼。請讓問題更清楚。 –

您需要使用javascript或jquery。

這是我該怎麼做。

獲取所選擇的類：

var levelClass = $('#qmt-manufacturer').find('option:selected').attr('class');

然後使用級別類中隱藏或顯示

$('#qmt-model option').each(function() { 
    var self = $(this); 
    self.hide(); 
    if (self.hasClass(levelClass)) { 
     self.show(); 
    } 
});

編輯：

闡明如何使用這個：它使用一個稍微改變的代碼版本

$(function(){ 
 
    $("#qmt-vehicle").on("change",function(){ 
 
     var levelClass = $('#qmt-vehicle').find('option:selected').attr('class'); 
 
     console.log(levelClass); 
 
     $('#qmt-manufacturer option').each(function() { 
 
      var self = $(this); 
 
      if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") { 
 
       self.show(); 
 
      } else { 
 
       self.hide(); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="qmt-vehicle">Vehicle:</label> 
 
<select id="qmt-vehicle" name="vehicle"> 
 
    <option></option> 
 
    <option class="car" value="cars">Cars</option> 
 
    <option class="motorcycle" value="motorcycles">Motorcycles</option> 
 
</select> 
 
<label for="qmt-manufacturer">Manufacturer:</label> 
 
<select id="qmt-manufacturer" name="manufacturer"> 
 
    <option></option> 
 
    <option class="car" value="cars">Cars</option> 
 
    <option class="car" value="ford">&nbsp;&nbsp;&nbsp;Ford</option> 
 
    <option class="car" value="chevrolet">&nbsp;&nbsp;&nbsp;Chevrolet</option> 
 
    <option class="motorcycle" value="motorcycles">Motorcycles</option> 
 
    <option class="motorcycle" value="honda">&nbsp;&nbsp;&nbsp;Honda</option> 
 
    <option class="motorcycle" value="yamaha">&nbsp;&nbsp;&nbsp;Yamaha</option> 
 
</select>

來源

2014-02-05 14:33:27

嗨，很好的解決方案。我只需要知道這個解決方案是否是跨瀏覽器的。 – Apalabrados

這是jQuery，所以是跨瀏覽器 –

當在主SELECT中更改時，如何重置第二個？我的意思是，如果第二個選擇有一個選定的項目，當改變第一個選擇時，儘管裏面的元素改變了，但主要文本不改變。 – Apalabrados

一個JavaScript可能會幫助你...... 您可以在「select」組件添加一個「onchange」事件（在Javascript）。另外，爲labels添加ID。

例子：

<label for="qmt-manufacturer" id="lblManufacturer"> 
<select id="qmt-manufacturer" name="manufacturer" 
        onchange="changeManufacturer(this.value);">

使用script標籤，建立你的Javascript方法如下：

<script type="text/javascript"> 
    function changeManufacturer(manufacturerValue){ 

     switch(manufacturerValue){ 
      case ford: 
      document.getElementById('lblManufacturer').innerHTML = 'FORD'; 
      break; 
      case chevrolet: 
      document.getElementById('lblManufacturer').innerHTML = 'Chevrolet'; 
      break; 
     } 

     // And so on for other values... 
    } 
</script>

上面這段代碼更改標籤文本的運行時間，實現它做出改變你秒dropdown（模型）

希望它可以幫助你。

來源

2014-02-05 14:21:19

謝謝丹尼爾，我只是意識到，我發佈了類似的問題.... –

@ user3270827，不客氣 –

還有另一種方式來實現這一目標---選中此小提琴例如：Fiddle

你可以從這個例子中學習，並根據您需要的第三個選擇框邏輯添加。

jQuery代碼：

$('#qmt-vehicle').on('change', function() { 
//alert(this.value); // or $(this).val() 
if (this.value == 'cars') { 
    $("#qmt-manufacturer").html(
     "<option class=\"level-1\" value=\"ford\">&nbsp;&nbsp;&nbsp;Ford</option><option class=\"level-1\" value=\"chevrolet\">&nbsp;&nbsp;&nbsp;Chevrolet</option>"); 

} else { 

    $("#qmt-manufacturer").html(
     "<option class=\"level-1\" value=\"honda\">&nbsp;&nbsp;&nbsp;Honda</option><option class=\"level-1\" value=\"yamaha\">&nbsp;&nbsp;&nbsp;Yamaha</option>"); 
} 

});

來源

2014-02-05 14:39:45 JavaScripter

顯示隱藏基於Jquery或Javascript中的上一個選擇下拉選擇選項

回答

相關問題