带链接的动态下拉列表
Dynamic Dropdown with Link
我们已经设置了2个下拉列表。一旦用户选择了一个选项下拉列表 1 和下拉列表中 2 中的选项,一旦选择并单击提交按钮,我们需要它来获取页面。
目前,代码设置为弹出窗口并显示不是我们想要的URL名称。
希望尽快收到某人的解决方案。
谢谢马塞洛
<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] =
new Option('Please select one of the options above first',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] =
new Option('UV Protection','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Acne','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Dry Skin','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Eczema','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Itchy Relief','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Redness','http://example.com/portfolio-item/hand-cream-frag-free/');
selbox.options[selbox.options.length] =
new Option('Sensitive Skin','http://example.com/portfolio-item/hand-cream-frag-free/');
}
if (chosen == "2") {
selbox.options[selbox.options.length] =
new Option('UV Protection','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Acne','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Dry Skin','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Eczema','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Itchy Relief','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Redness','http://example.com/portfolio-item/foot-balm/');
selbox.options[selbox.options.length] =
new Option('Sensitive Skin','http://example.com/portfolio-item/foot-balm/');
}
if (chosen == "3") {
selbox.options[selbox.options.length] =
new Option('UV Protection','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Acne','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Dry Skin','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Eczema','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Itchy Relief','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Redness','http://example.com/portfolio-item/body-lotion/');
selbox.options[selbox.options.length] =
new Option('Sensitive Skin','http://example.com/portfolio-item/body-lotion/');
}
}
</script>
<form name="myform"><div class="centre">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[ document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected">I am</option>
<option value="1">Someone who works with my hands</option>
<option value="2">Someone who works with my feet</option>
<option value="3">Someone who works with my body</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">and I need</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[ document.myform.opttwo.selectedIndex].value);">
</div></form>
而不是 onclick="alert(...)"
,尝试onclick="window.location(...)"
将浏览器发送到该页面。
更新回复:我们的对话
为了使它更清晰,我会将所有选项放入一个大数组对象中,您可以在该对象上执行各种(更简单的)函数:
var options = {
"hands" : [
['UV Protection','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Acne','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Dry Skin','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Eczema','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Itchy Relief','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Redness','http://example.com/portfolio-item/hand-cream-frag-free/'],
['Sensitive Skin','http://example.com/portfolio-item/hand-cream-frag-free/'],
],
"feet" : [
['UV Protection','http://example.com/portfolio-item/foot-balm/'],
['Acne','http://example.com/portfolio-item/foot-balm/'],
['Dry Skin','http://example.com/portfolio-item/foot-balm/'],
['Eczema','http://example.com/portfolio-item/foot-balm/'],
['Itchy Relief','http://example.com/portfolio-item/foot-balm/'],
['Redness','http://example.com/portfolio-item/foot-balm/'],
['Sensitive Skin','http://example.com/portfolio-item/foot-balm/'],
],
"body" : [
['UV Protection','http://example.com/portfolio-item/body-lotion/'],
['Acne','http://example.com/portfolio-item/body-lotion/'],
['Dry Skin','http://example.com/portfolio-item/body-lotion/'],
['Eczema','http://example.com/portfolio-item/body-lotion/'],
['Itchy Relief','http://example.com/portfolio-item/body-lotion/'],
['Redness','http://example.com/portfolio-item/body-lotion/'],
['Sensitive Skin','http://example.com/portfolio-item/body-lotion/'],
]
};
相关文章:
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 基于所选下拉列表值创建动态复选框
- 无法使用国家/地区选择中的状态动态填充下拉列表
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- webforms:在javascript中动态添加下拉列表选项
- HtmlService表单-动态下拉列表
- 动态下拉列表选项在添加多列后未填充
- 使用 JavaScript 创建动态下拉列表
- 引导下拉列表动态 ajax 列表项
- 动态更改的下拉列表不会刷新.(雾虫)
- 使用javascript中的append创建动态下拉列表
- 将下拉列表动态更改为文本字段opencart
- 通过下拉列表动态更新总数
- ASP:下拉列表动态更改
- 来自 JavaScript 问题的 ASP 下拉列表动态值
- 通过输入字段和下拉列表动态更新字段
- 使用下拉列表动态更改照片
- 从其他下拉列表动态填充html下拉列表