根据选择的选项显示/隐藏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

回答

相关问题