我们没有很多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);
});
答案 0 :(得分：0)
请定义如何形成网址。 F.E. {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/