显示基于先前选择下拉菜单的隐藏选择选项 [英] Show Hide select options based on previous selection dropdown
问题描述
感谢您阅读我的问题...;-)
Thanks for reading my question... ;-)
我正在建立一个使用自定义帖子和自定义字段显示车辆清单的Wordpress网站.我希望访客能够按分类法来筛选帖子...
I'm building a Wordpress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...
我用于钻取可用分类法(查询多个分类法)的插件将针对特定分类法可以找到的所有选项输出到下拉列表中.
The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.
为防止下拉列表(即型号)过长，我只想显示基于先前选择的那些选项.
To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.
因此，当访问者选择车辆=汽车"时，制造商"下拉列表应仅显示汽车制造商. 当访客选择制造商(即福特)时，下一个用于选择模型的下拉列表应仅显示可用于先前选择的制造商的模型，在这种情况下为福特...
So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers. When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...
标签和0级值不变，但是当我添加或更改制造商或模型时，1级和/或2级会发生变化.
The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.
不是那么重要，但是，如果可能的话，也可以删除不需要的所有内容以显示在过滤的"下拉列表中.如果是制造商下拉列表，则不需要级别0和所有空格. 如果出现模型"下拉列表，选择后不需要级别0，级别1和所有空格.
Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed. In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.
以下是该插件生成的HTML代码的示例:
Here's a sample how the HTML-code, generated by the plugin, looks like:
<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做一些简单的事情，但这对我来说并不简单，对不起...;-)
I can do some simple things with Javascript but this is not simple to me, sorry... ;-)
有人可以帮我弄清楚如何用Javascript/JQuery做到这一点吗? 跨浏览器会很棒！
Can someone please help me to figure out how to do this in Javascript/JQuery? Cross browser would be great!
*编辑 * HTML代码显示了发送到浏览器的代码.因为我不能对插件进行太多修改，所以我想操纵"此代码以使其按照我想要的方式工作; ;-) 唯一固定的内容是:下拉菜单的标签和所有Class ="level-0"元素的值.
* EDIT * The HTML code shows the code send to the browser. Because I cannot modify the plugin that much, I'd like to "manipulate" this code to make it work the way I want to... ;-) The only fixed things are: Labels for the dropdowns and the Values for all the Class="level-0" elements.
因此，汽车"和摩托车"将始终存在且永不改变.从那里开始，一切都可以灵活更改. IE.如果没有可供Chevy显示的帖子，则Chevy将不在生成的HTML中.因此，该插件仅显示确实存在且可以找到的项目的下拉选项. 因此，当根本没有福特汽车可用时，福特汽车将不会出现在下拉菜单中...
So "Cars" and "Motorcycles" will always stay and never change. BUT from there everything is flexible to change. I.e. when there are no Posts for Chevy's to display, Chevy will not be in the generated HTML. So the plugin only shows dropdown options for the items that are realy there and can be found. So when there's no Ford available at all, Ford will not be in the dropdown...
我宁愿不列出制造商及其模型的预定义列表.
I rather not make a predefined list of Manufacurers and their Models.
推荐答案
我建议您将数据保存在javascript中，因此您只需要为每个模型显示必要的选项，而不必隐藏它们..
I would suggest you hold the data in javascript so you only need to show the necessary options for each model without having to hide some..
我把它放在jsfiddle上，但是网站一直在中断. 下面的代码已经过测试，并且可以正常工作.
I put this on jsfiddle but the site keeps breaking. The code below was tested and works though.
确定现在可以工作:
<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>
这篇关于显示基于先前选择下拉菜单的隐藏选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
