Question

我听了汽车品牌和汽车模型。当用户选择某个汽车品牌时，相关型号会出现在下一个下拉列表中。

这些是汽车制造下拉列表中的一些选项。这是一个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-bmw和.cars-audi（等）定义为样式显示：无

我现在有javascript来检查第一个下拉列表中的哪个选项已被选中。从那里它可以确定要显示哪个.car-make

这是不工作小提琴:(

http://jsfiddle.net/HPMkL/

Answer 1

您不能使用这样的ID，因为它必须是唯一的...尝试{/ 1}}属性，如

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>

演示：Fiddle

Answer 2

试试这个。我做了一些修改

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

根据选择的选项显示/隐藏div

2 个答案: