感谢您阅读我的问题...; - ）
我正在构建一个Wordpress网站，该网站使用自定义帖子和自定义字段来显示车辆库存。我希望访问者能够按分类法过滤帖子......
我用于钻取可用分类法（查询多个分类法）的插件将它可以为特定分类法找到的所有选项输出到下拉列表中。
为防止下拉列表（即模型）变得太长，我想仅显示基于先前选择的那些选项。
因此，当访问者选择Vehicle = Cars时，制造商的下拉列表应仅显示汽车制造商。 当访问者选择制造商，即福特时，选择模型的下一个下拉列表应该只显示前一个选定制造商可用的模型，在这种情况下福特......
标签和0级值不会改变，但是当我添加或更改制造商或型号时，级别1和/或级别2会发生变化。
不是那么重要但是，如果可能的话，在“过滤”下拉列表中删除所有不需要的东西也是很好的。如果是制造商下拉列表，则不需要等级0和所有空格。 如果是模型下拉列表，则在选择后不需要level-0，level1和所有空格。
以下是插件生成的HTML代码的示例：
<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>
我可以用Javascript做一些简单的事情，但这对我来说并不简单，抱歉......; - ）
有人可以帮我弄清楚如何在Javascript / JQuery中执行此操作吗？ 跨浏览器会很棒！
*编辑 * HTML代码显示发送到浏览器的代码。因为我无法修改插件那么多，我想“操纵”这段代码，使其按照我想要的方式工作...... ;-) 唯一固定的东西是：下拉列表的标签和所有Class =“level-0”元素的值。
所以“汽车”和“摩托车”将始终保持不变。但从那里一切都变得灵活变化。即当没有Chevy的帖子显示时，Chevy将不会生成HTML。因此，该插件仅显示真正存在且可以找到的项目的下拉选项。 因此，当根本没有福特可用时，福特将不会进入下拉列车......
我宁愿不制作Manufacurers及其模型的预定义列表。
答案 0 :(得分：0)
订阅您的select元素'onchange个活动：http://www.w3schools.com/jsref/event_onchange.asp。在事件处理程序中，读取当前选定的值并相应地重新填充其他元素。
答案 1 :(得分：0)
我建议您在javascript中保存数据，这样您只需要为每个模型显示必要的选项，而不必隐藏一些..
我把它放在jsfiddle上，但网站一直在破碎。 下面的代码已经过测试并且有效。
好的现在工作：
<script type="text/javascript">
var vehicles = {"Cars": {
"Ford" : [ "Fiesta", "Focus", "Fusion"],
"Chevy": [ "Malibu", "Corvette", "Tahoe"],
},
"Motorcycles": {
"Honda": ["model 1", "model 2", "model 3"],
"Yamaha": ["model 1", "model 2", "model 3", "model 4"]
}
};
$(document).ready(function() {
var $vehiclesList = $("#qmt-vehicle");
var $manufList = $("#qmt-manufacturer");
var $modelList = $("#qmt-model");
var selectedType = null
var selectedManuf = null;
$.each(vehicles, function(key, vehicle) {
$vehiclesList.append($("<option/>", {value:key,text:key}));
});
$vehiclesList.bind("change", function() {
selectedType = $(this).val();
if (selectedType && vehicles[selectedType]) {
var manufacturers = vehicles[selectedType];
$("#qmt-manufacturer option").not(":first").remove();
$("#qmt-model option").not(":first").remove();
$.each(manufacturers, function(key, manufacturer) {
$manufList.append($("<option/>", { value: key, text: key}));
});
}
});
$manufList.bind("change", function() {
var selectedManuf = $(this).val();
$("#qmt-model option").not(":first").remove();
if (selectedManuf && vehicles[selectedType] && vehicles[selectedType][selectedManuf]) {
var models = vehicles[selectedType][selectedManuf];
$.each(models, function(key, model) {
$modelList.append($("<option/>", { value: model, text: model}));
});
}
});
});
</script>
然后在你的页面中你有
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
</select>