根据选择选项元素将表单重定向到不同的 URL答案

【问题标题】：Redirect form to different URL based on select option element根据选择选项元素将表单重定向到不同的 URL
【发布时间】：2012-09-05 12:27:53
【问题描述】：

JavaScript 新手寻求帮助。我有一个带有 5 个选项的选择下拉列表。选项1 选项2 选项3 选项4 选项5'

如果选择了除选项 1 之外的任何选项（应该是页面加载时的默认选项），我需要让表单重定向到另一个 url。

提前谢谢你

我只用了以下

<form action="" id="main" name="main" method="get" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">

<select id="Region" name="Region" tabindex="7">
   <option value="/url">Option1</option>
   <option value="/url">Option2</option>
   <option value="/url">Option3</option>
   <option value="/url>Option4</option>
   <option value="" selected="selected">Option5</option>'
</select>

【问题讨论】：

标签： javascript select onclick

【解决方案1】：

只需将onchnage Event 用于选择框。

<select id="selectbox" name="" onchange="javascript:location.href = this.value;">
    <option value="https://www.yahoo.com/" selected>Option1</option>
    <option value="https://www.google.co.in/">Option2</option>
    <option value="https://www.gmail.com/">Option3</option>

</select>

如果选择的选项在页面加载时加载，则添加一些 javascript 代码

<script type="text/javascript">
    window.onload = function(){
        location.href=document.getElementById("selectbox").value;
    }       
</script>

对于 jQuery：从 <select> 标签中移除 onchange 事件

jQuery(function () {
    // remove the below comment in case you need chnage on document ready
    // location.href=jQuery("#selectbox").val(); 
    jQuery("#selectbox").change(function () {
        location.href = jQuery(this).val();
    })
})

【讨论】：

如果我想只使用 jQuery 来达到同样的效果？
为什么一个是onLoad而另一个用jQuery是onChange？第一个工作不作为方面 - 我无法选择值，我在此之前被重定向；）
@KrishnaKumar，我希望在重定向到 url 后选择下拉菜单，可以这样做吗？

【解决方案2】：

你可以用这个简单的方法

<select onchange="location = this.value;">
                <option value="/finished">Finished</option>
                <option value="/break">Break</option>
                <option value="/issue">Issues</option>
                <option value="/downtime">Downtime</option>
</select>

将重定向到路由 url，您可以直接到 .html 页面或直接到某个链接，只需在选项中更改 value。

【讨论】：

【解决方案3】：

这可以通过在选择控件的 onchange 事件上添加代码来存档。

例如：

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>

【讨论】：