Javascript 多重下拉菜单选择
我们对HTML或java脚本没有太多经验，这里构建的是从其他人的响应和代码创建的。所以我们边走边学 但是现在我们需要一个javascript函数，它将为我们提供一个特定于他们在下拉选择中选择的项目的URL。对于每个可能的组合，我们需要一个不同的URL 我们已经设置了产品，我们只需要一个界面，让他们更容易导航 你可以通过这个链接看到我们现在的位置 我们正在尝试加载它的网站是crave-pop.squarespace.comJavascript 多重下拉菜单选择,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,我们对HTML或java脚本没有太多经验，这里构建的是从其他人的响应和代码创建的。所以我们边走边学 但是现在我们需要一个javascript函数，它将为我们提供一个特定于他们在下拉选择中选择的项目的URL。对于每个可能的组合，我们需要一个不同的URL 我们已经设置了产品，我们只需要一个界面，让他们更容易导航 你可以通过这个链接看到我们现在的位置 我们正在尝试加载它的网站是crave-pop.squarespace.com <form action="#" class="cascadeTes
<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>
请定义url的形成方式。 F.E.{url}/[flavor\u one]/[flavor\u 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();
}
这实际上是可行的！！现在我唯一担心的是，如果我选择了3种口味，然后我做出了选择，但我决定改变主意，回到1种口味，url不会改变，它会保留先选择的值。还有，有没有办法将该div放在按钮中？你想雇用我吗我已经更新了小提琴，我想你可以把剩下的都摆好。嘿，我看了看小提琴，但还是和以前一样。还是有不同的联系？
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();
}