多个下拉菜单选择
Multiple Dropdown Menu Selection
我们没有很多HTML或java脚本的经验,这里构建的东西是根据其他人的响应和代码创建的。所以我们边做边学。
但是现在我们需要一个javascript函数,它将给我们一个特定于他们在下拉选项中选择的项目的URL。对于每种可能的组合,我们需要一个不同的URL。
我们已经设置好了产品,我们只需要一个界面让它们更容易导航。
你可以通过这个链接看到我们现在的位置https://jsfiddle.net/christianxpinon/44jj3ata/
我们要加载的网站是crave-pop.squarespace.com
<form action="#" class="cascadeTest">
<table>
<tr>
<th>Tin Size:</th>
<td>
<select name="sizSelect" class="sizSelect">
<option value="0">Select an Tin Size</option>
<option value="1">2 Gallon</option>
<option value="2">3.5 Gallon</option>
<option value="3">6 Gallon</option>
</select>
</td>
</tr>
<tr>
<th>Amount of Flavors:</th>
<td>
<select name="amtSelect" class="amtSelect">
<option value="0" class="static">- Amount of Flavors -</option>
<option value="1" class="sub_1">1 Flavor</option>
<option value="2" class="sub_1">2 Flavors</option>
<option value="3" class="sub_1">3 Flavors</option>
<option value="4" class="sub_2">1 Flavor</option>
<option value="5" class="sub_2">2 Flavors</option>
<option value="6" class="sub_2">3 Flavors</option>
<option value="7" class="sub_3">1 Flavor</option>
<option value="8" class="sub_3">2 Flavors</option>
<option value="9" class="sub_3">3 Flavors</option>
</select>
</td>
</tr>
<tr>
<th>Flavor 1:</th>
<td>
<select name="flaSelect" class="flaSelect">
<option value="0" class="static">- All Flavors -</option>
<option value="1" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Old Fashion Butter</option>
<option value="2" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Naked Low Salt</option>
<option value="3" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Movie Theater</option>
<option value="4" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Cheddar Cheese</option>
<option value="5" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Jalapeno Cheddar</option>
<option value="6" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">White Cheddar</option>
<option value="7" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">White Cheddar & Bacon</option>
<option value="8" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Vinegar N Sea Salt</option>
<option value="9" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Dill Pickle</option>
<option value="10" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Simply Ranch</option>
<option value="12" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Ranch With A Kick</option>
<option value="13" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Cracked Black Pepper</option>
<option value="14" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Kettle</option>
<option value="15" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Classic Caramel</option>
<option value="16" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Pure Vanilla</option>
<option value="17" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">NYC Cheesecake</option>
<option value="18" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Roy G Biv</option>
<option value="19" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Dallas</option>
<option value="20" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Denver</option>
<option value="21" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Chicago</option>
<option value="22" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Team Spirit</option>
<option value="23" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Chocolate N Sea Salt</option>
<option value="24" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Cinnamon Bun</option>
<option value="25" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Dark Chocolate Toffee</option>
<option value="26" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Pecan Pie</option>
<option value="27" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Zebra</option>
<option value="28" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Puppy Chow</option>
<option value="29" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">White Chocolate Oreo</option>
<option value="30" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Nutella</option>
<option value="31" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Salted Nutty Caramel</option>
<option value="32" class="sub_1 or sub_2 or sub_3 or sub_4 or sub_5 or sub_6 or sub_7 or sub_8 or sub_9">Team Kelly</option>
</select>
</td>
</tr>
<tr>
<th>Flavor 2:</th>
<td>
<select name="fla2Select" class="fla2Select">
<option value="0" class="static">- All Flavors -</option>
<option value="1" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Old Fashion Butter</option>
<option value="2" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Naked Low Salt</option>
<option value="3" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Movie Theater</option>
<option value="4" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Cheddar Cheese</option>
<option value="5" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Jalapeno Cheddar</option>
<option value="6" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">White Cheddar</option>
<option value="7" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">White Cheddar & Bacon</option>
<option value="8" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Vinegar N Sea Salt</option>
<option value="9" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Dill Pickle</option>
<option value="10" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Simply Ranch</option>
<option value="12" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Ranch With A Kick</option>
<option value="13" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Cracked Black Pepper</option>
<option value="14" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Kettle</option>
<option value="15" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Classic Caramel</option>
<option value="16" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Pure Vanilla</option>
<option value="17" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">NYC Cheesecake</option>
<option value="18" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Roy G Biv</option>
<option value="19" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Dallas</option>
<option value="20" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Denver</option>
<option value="21" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Chicago</option>
<option value="22" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Team Spirit</option>
<option value="23" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Chocolate N Sea Salt</option>
<option value="24" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Cinnamon Bun</option>
<option value="25" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Dark Chocolate Toffee</option>
<option value="26" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Pecan Pie</option>
<option value="27" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Zebra</option>
<option value="28" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Puppy Chow</option>
<option value="29" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">White Chocolate Oreo</option>
<option value="30" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Nutella</option>
<option value="31" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Salted Nutty Caramel</option>
<option value="32" class="sub_2 or sub_3 or sub_5 or sub_6 or sub_8 or sub_9">Team Kelly</option>
</select>
</td>
</tr>
<tr>
<th>Flavor 3:</th>
<td>
<select name="fla3Select" class="fla3Select">
<option value="0" class="static">- All Flavors -</option>
<option value="1" class="sub_3 or sub_6 or sub_9">Old Fashion Butter</option>
<option value="2" class="sub_3 or sub_6 or sub_9">Naked Low Salt</option>
<option value="3" class="sub_3 or sub_6 or sub_9">Movie Theater</option>
<option value="4" class="sub_3 or sub_6 or sub_9">Cheddar Cheese</option>
<option value="5" class="sub_3 or sub_6 or sub_9">Jalapeno Cheddar</option>
<option value="6" class="sub_3 or sub_6 or sub_9">White Cheddar</option>
<option value="7" class="sub_3 or sub_6 or sub_9">White Cheddar & Bacon</option>
<option value="8" class="sub_3 or sub_6 or sub_9">Vinegar N Sea Salt</option>
<option value="9" class="sub_3 or sub_6 or sub_9">Dill Pickle</option>
<option value="10" class="sub_3 or sub_6 or sub_9">Simply Ranch</option>
<option value="12" class="sub_3 or sub_6 or sub_9">Ranch With A Kick</option>
<option value="13" class="sub_3 or sub_6 or sub_9">Cracked Black Pepper</option>
<option value="14" class="sub_3 or sub_6 or sub_9">Kettle</option>
<option value="15" class="sub_3 or sub_6 or sub_9">Classic Caramel</option>
<option value="16" class="sub_3 or sub_6 or sub_9">Pure Vanilla</option>
<option value="17" class="sub_3 or sub_6 or sub_9">NYC Cheesecake</option>
<option value="18" class="sub_3 or sub_6 or sub_9">Roy G Biv</option>
<option value="19" class="sub_3 or sub_6 or sub_9">Dallas</option>
<option value="20" class="sub_3 or sub_6 or sub_9">Denver</option>
<option value="21" class="sub_3 or sub_6 or sub_9">Chicago</option>
<option value="22" class="sub_3 or sub_6 or sub_9">Team Spirit</option>
<option value="23" class="sub_3 or sub_6 or sub_9">Chocolate N Sea Salt</option>
<option value="24" class="sub_3 or sub_6 or sub_9">Cinnamon Bun</option>
<option value="25" class="sub_3 or sub_6 or sub_9">Dark Chocolate Toffee</option>
<option value="26" class="sub_3 or sub_6 or sub_9">Pecan Pie</option>
<option value="27" class="sub_3 or sub_6 or sub_9">Zebra</option>
<option value="28" class="sub_3 or sub_6 or sub_9">Puppy Chow</option>
<option value="29" class="sub_3 or sub_6 or sub_9">White Chocolate Oreo</option>
<option value="30" class="sub_3 or sub_6 or sub_9">Nutella</option>
<option value="31" class="sub_3 or sub_6 or sub_9">Salted Nutty Caramel</option>
<option value="32" class="sub_3 or sub_6 or sub_9">Team Kelly</option>
</select>
</td>
</tr>
</table>
提前感谢!
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
sizSelect = cascadeForm.find('.sizSelect');
amtSelect = cascadeForm.find('.amtSelect');
flaSelect = cascadeForm.find('.flaSelect');
fla2Select = cascadeForm.find('.fla2Select');
fla3Select = cascadeForm.find('.fla3Select');
cascadeSelect(sizSelect, amtSelect);
cascadeSelect(amtSelect, flaSelect);
cascadeSelect(amtSelect, fla2Select);
cascadeSelect(amtSelect, fla3Select);
});
请定义url的格式。远东{url}/[flavour_one]/[flavour_two]
对于上面的例子,这段代码应该可以工作:function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
$('#'+parent.data('url_param')).text('/'+$(this).val());
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change(function(){
if($(this).val() != 0){
$('#'+child.data('url_param')).text('/'+$(this).val());
}
})
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
这是一个工作小提琴:https://jsfiddle.net/lacrioque/wbq8qs82/
相关文章:
- 从选择下拉菜单中获取数据
- 在angularjs UI网格列中选择下拉菜单不适用于外部editcellTemplate
- JS在选择下拉菜单打开时创建延迟
- 选择下拉菜单:实现非精确搜索,每个单词都将被不可重复地搜索
- 在javascript中动态添加一个选择下拉菜单
- html表单上的许多选择(下拉菜单),如何只获取更改的选择的值
- 未选择下拉菜单时更改css
- 存储值后,重复重新选择选择下拉菜单的第一个选项
- 用于关闭和打开的Jquery事件选择下拉菜单,而不是在更改时
- 是否可以在HTML选择下拉菜单的每个选项上附加一个qtip2工具提示
- 如何使用选择下拉菜单更改元素
- 圆角<选择>下拉菜单
- 在选择下拉菜单时创建文本字段
- HTML选择下拉菜单,最大高度为100%,大小自动
- <选择>下拉菜单以定位JavaScript打开的文件
- 将数据加载到动态填充的分部视图中的选择下拉菜单
- 表排序器从选择下拉菜单和自定义时间过滤器中选择多个选项
- angularjs-编辑项目时,在选择下拉菜单中设置所选值
- 输入-选择下拉菜单在firefox中不起作用
- AngularJS-为什么选择下拉菜单;零钱上没有$event