How to Redirect Drop Down Menu When Option Is Selected

Select dropdown option redirecting on clicking on button

I hope below code helps you,

<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="http://www.amazon.com">Amazon</option>
<option value="http://www.flipkart.com">Flipkart</option>
<option value="http://www.snapdeal.com">Snapdeal</option>
</select>
<button onclick="siteRedirect()">GO</button>

<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}

</script>

Drop down menu to remember selection and redirect user with ability to change the selected country

The right answer is bellow. All credits are for @imvain2 . Thank you very much. If you could post your answer here so I could mark it as solution.

Code

<script type="text/javascript">
if(location.href.indexOf(localStorage.country) == -1){
location.href = localStorage.country
}

function formChanged(form) {
var val = form.options[form.selectedIndex].value;
if (val !== 'non-value') {
if (localStorage) {
localStorage.country = val;
}

if (!location.href.indexOf(val)) {
location = val;
}
}
}

</script>

<FORM NAME="form1">
<select id="saleTerm" onchange="formChanged(this); location =
this.options[this.selectedIndex].value;" NAME="country" SIZE="1">
<OPTION VALUE="non-value">Select delivery city
<OPTION VALUE="/kategoria-produktu/cadca/">Čadca
<OPTION VALUE="/kategoria-produktu/brno/">Brno
<OPTION id="bratislava" VALUE="/kategoria-produktu/bratislava/">Bratislava
</select>
</FORM>

How to redirect drop down menu when option is selected?

Adding:

citySel.onchange = function(){
window.location.href = "http://google.it";
}

At the bottom of window.onload = function () { should do the job.

You probabily want to do something like:

citySel.onchange = function(){
switch(citySel.value){
case "Salinas":
window.location.href = "http://salinas.com";
break;
case "Gonzales":
if(stateSel.value == "Something"){
window.location.href = "http://gonzales.com";
}else if(stateSel.value == "Else"){
window.location.href = "http://gonzales.com";
}
break;
}

Simple redirect to URL from select drop down in FACEBOOK iframe

Try {} this.options also your urls are mistyped. http://www.leeds.html should be http://www.leeds.com , not sure if that is related but just wanted to point that out just in case.


<form name="cityselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>

Parent Frame:

<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.leeds.com">Leeds</option>
<option value="http://www.manchester.com">Manchester</option>
</select>
</form>

Redirect form to different URL based on select option element

Just use a onchnage Event for select box.

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

And if selected option to be loaded at the page load then add some javascript code

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

for jQuery: Remove the onchange event from <select> tag

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

Redirect form after button click depending on dropdown box selection

You can create a hidden <input> field, like this:

<input type="hidden" id="myHiddenField">

and upon user selecting an option, save the URL into the hidden input field:

$("#selectbox").on("change", function(){
$('#myHiddenField').val(this.value);
});

Then, your javascript can look something like this (untested):

$('#search-form').submit(function(e) {
var url = $('#myHiddenField').val();
alert(url);
window.location.replace(url);
//e.preventDefault(); //<== prevent form submission, IF DESIRED
});

jsFiddle


personally, I prefer to use a submit button that is type="button" (instead of type=submit) and then use jQuery to submit the form when I am ready. That gets around all the issues of using preventDefault(), etc.

<input type="button" value="Submit It" id="get_info">

and then the jQuery:

$('#get_info').click(function() {
var url = $('#myHiddenField').val();
alert(url);
window.location.replace(url);
$('#search-form').submit();
});

Then again, I'm not sure if you can combine the submit() and window.location.replace() methods...*

Redirect automatically when selecting an item from a select drop-down list

You don't need a pre-packaged script for this, just a couple lines of code.

// get your select element and listen for a change event on it
$('#selectEl').change(function() {
// set the window's location property to the value of the option the user has selected
window.location = $(this).val();
});

How to redirect to page with dropdown in an SPA?

Have you got a dropdown menu?

I would create one in the HTML:

<select ng-options="filter for filters in filters"
ng-model="filter"
ng-change="letsGoToANewPage(filter)">
<option value="">Select Option</option>
</select>

and your javascript:

$scope.letsGoToANewPage = function(filter){

if(filter === "Canny"){
window.location.href = "http://mywebsite.com"
}

};


Related Topics



Leave a reply



Submit