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

Question

我是JavaScript的新手，需要一些帮助。 我有一个表单，其中包含一个选择下拉菜单，其中有5个选项。 Option1 Option2 option3 Option4 Option5'

我需要在选择除默认选项1之外的任何选项时将表单重定向到另一个网址。

提前致谢

我只使用了以下内容

<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>

- user1400854

Answer 1

只需为选择框使用 onchange事件。

<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();
    })
})

- Krishna Kumar

---

如果我想只使用jQuery来实现相同的结果呢？ - user1400854

为什么一个是onLoad，另一个用jQuery是onChange？第一个不像预期的那样工作 - 我无法选择值，在此之前我被重定向了 ;) - Gediminas Šukys

@KrishnaKumar，我想要在重定向到URL后选择下拉菜单，这可以实现吗？ - jafar pinjar

Answer 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>

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

- kumbhani bhavesh

Answer 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>

- Codemaker