Question

我正在使用提供搜索表单创建者的WordPress主题。它为搜索下拉列表分配了一个类别。我的类别是汽车制造和汽车模型。但是，我想根据第一个字段中选择的汽车品牌确定汽车模型列表 - 合并过滤搜索。

如何根据第一个选项中的第二个下拉列表动态更改选项？

例如，如果用户选择奥迪，则在下一个下拉菜单中只能看到A1，A3和A4。

<form action="http://*.com/browse/" method="post" class="search_cars">


<label for="brand">Make:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–</option>
<option class="level-0" value="73">Audi</option>
<option class="level-0" value="75">BMW</option>
</select>

<label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–</option>
<option class="level-0" value="172">1 Series</option>
<option class="level-0" value="173">2 Series</option>
<option class="level-0" value="106">3 Series</option>
<option class="level-0" value="169">A1</option>
<option class="level-0" value="170">A3</option>
<option class="level-0" value="171">A4</option>
</select>


<input type="submit" id="buy_car_submit" name="buy_car_submit" value="Find Cars">
<input type="hidden" name="search_form_id" value="298">

Answer 1

我创建了这个jsfiddle来向您展示我的目标：http://jsfiddle.net/BSjWx/在您选择make时，使用可以更改模型的内容：

<div class="ccms_form_element cfdiv_custom" id="style_container_div">

<label for="brand">Make:</label>

<select size="1" id="make" type="select" name="style">
<option value="-1">–Choose a Make-</option>
<option class="level-0" value="Audi">Audi</option>
<option class="level-0" value="BMW">BMW</option>
</select>
    <div class="clear"></div><div id="error-message-style"></div>

<div id="BMW"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</option>
<option class="level-0" value="172">1 Series</option>
<option class="level-0" value="173">2 Series</option>
<option class="level-0" value="106">3 Series</option>
</select>
</div>
<div id="Audi"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
    <label for="brand">Model:</label>

<select name="cat" id="cat" class="postform">
<option value="-1">–Choose a Model-</option>
<option class="level-0" value="169">A1</option>
<option class="level-0" value="170">A3</option>
<option class="level-0" value="171">A4</option>
</select>
</div>
<div class="clear"></div>
<div id="error-message-style-sub-1"></div></div>

然后在每次选择make时使用此jQuery进行更改：

$("#make").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
} )

根据以前的下拉选项更改下拉选项（已过滤的搜索）

1 个答案: