根據選擇的選項顯示/隱藏div

-2

我有聽汽車製造商和汽車模型。當用戶選擇某輛汽車時，相關型號將出現在下一個下拉列表中。根據選擇的選項顯示/隱藏div

這些是汽車下拉的一些選項。這是一個WordPress網站，因此它被分配了一個id和值。

<option id="level-0" value="29">Alfa Romeo</option> 
    <option id="level-0" value="73">Audi</option> 
    <option id="level-0" value="75">BMW</option> 
    <option id="level-0" value="31">Citroen</option> 
    <option id="level-0" value="78">Fiat</option>

這裏是汽車模型下拉列表的選項。我已經給每個選項一個獨特的ID來鏈接他們各自的汽車製造。

<option id="cars-bmw" value="172">1 Series</option> 
    <option id="cars-bmw" value="173">2 Series</option> 
    <option id="cars-bmw" value="106">3 Series</option> 
    <option id="cars-audi" value="169">A1</option> 
    <option id="cars-audi" value="170">A3</option> 
    <option id="cars-audi" value="171">A4</option>

頁面加載時，我已經定義的類.cars寶馬和.cars奧迪（ETC）的風格顯示：無

我現在有JavaScript來檢查該選項在第一下拉菜單已被選中。從那裏，它可以決定哪些。汽車，使顯示

這裏是一個非工作小提琴:(

http://jsfiddle.net/HPMkL/

來源

2014-03-28 BallSoHard

隱藏選項無法正常工作，跨瀏覽器 –

ID必須是唯一的** **！ –

以及那個重複無效的相同ID。 – Jai

你不能使用這樣的ID，因爲它必須是唯一的...嘗試data-*屬性，如

<option id="level-0" data-make="cars-audi" value="73">Audi</option>

然後在類別

<option data-make="cars-audi" value="169">A1</option> 
<option data-make="cars-audi" value="170">A3</option> 
<option data-make="cars-audi" value="171">A4</option>

然後

jQuery(function ($) { 
    var $cat = $('#cat'), 
     $models = $cat.find('option').slice(1).remove(), 
     $test = $('#test'); 
    $test.change(function() { 
     $models.add($cat.find('option').slice(1).remove()); 
     var $opts = $models.filter('[data-make="' + $(this).find('option:selected').data('make') + '"]'); 
     $cat.append($opts) 
    }).change() 
})

演示：Fiddle

來源

2014-03-28 12:14:01

試試這個。我做了一些修改

$('#test').change(function(){ 
if(document.getElementById('test').value == "73") { 
    document.getElementById('cars-audi').style.display="inline"; 
}});

來源

2014-03-28 12:13:51 Puvanarajan

根據選擇的選項顯示/隱藏div

回答

相關問題