我正在构建一个WordPress网站，该网站使用自定义帖子和自定义字段来显示车辆库存。我希望访问者能够按分类法过滤帖子......
我用于钻取可用分类法（查询多个分类法）的插件将它可以为特定分类法找到的所有选项输出到下拉列表中。
为防止下拉列表（即模型）变得太长，我想仅显示基于先前选择的那些选项。
因此，当访问者选择Vehicle = Cars时，制造商的下拉列表应仅显示汽车制造商。当访问者选择制造商，即福特时，选择模型的下一个下拉列表应该只显示前一个选定制造商可用的模型，在这种情况下福特......
标签和0级值不会改变，但是当我添加或更改制造商或型号时，级别1和/或级别2会发生变化。
不是那么重要但是，如果可能的话，在“过滤”下拉列表中删除所有不需要的东西也是很好的。如果是制造商下拉列表，则不需要等级0和所有空格。如果是模型下拉列表，则在选择后不需要level-0，level1和所有空格。
我可以用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"> Ford</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-1" value="yamaha"> 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"> Ford</option>
<option class="level-2" value="model-1-ford"> Model 1</option>
<option class="level-2" value="model-2-ford"> Model 2</option>
<option class="level-2" value="model-3-ford"> Model 3</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-2" value="model-1-chevrolet"> Model 1</option>
<option class="level-2" value="model-2-chevrolet"> Model 2</option>
<option class="level-2" value="model-3-chevrolet"> Model 3</option>
<option class="level-0" value="motoren">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-2" value="model-1-honda"> Model 1</option>
<option class="level-2" value="model-2-honda"> Model 2</option>
<option class="level-2" value="model-3-honda"> Model 3</option>
<option class="level-1" value="yamaha"> Yamaha</option>
<option class="level-2" value="model-1-yamaha"> Model 1</option>
<option class="level-2" value="model-2-yamaha"> Model 2</option>
<option class="level-2" value="model-3-yamaha"> Model 3</option>
</select>
答案 0 :(得分：3)
您需要使用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"> Ford</option>
<option class="car" value="chevrolet"> Chevrolet</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
<option class="motorcycle" value="honda"> Honda</option>
<option class="motorcycle" value="yamaha"> Yamaha</option>
</select>
答案 1 :(得分：0)
Javascript可能会帮助你......
您可以在“onchange”组件中添加“select”事件（在Javascript中）。另外，为ID添加labels。
示例：
<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（模型）中进行更改
希望它对你有所帮助。
答案 2 :(得分：0)
还有另一种方法可以实现这一点 - 查看这个小提琴示例：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\"> Ford</option><option class=\"level-1\" value=\"chevrolet\"> Chevrolet</option>");
} else {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"honda\"> Honda</option><option class=\"level-1\" value=\"yamaha\"> Yamaha</option>");
}
});