Redirect on Select Option in Select Box

Redirect on select option in select box

Because the first option is already selected, the change event is never fired. Add an empty value as the first one and check for empty in the location assignment.

Here's an example:

https://jsfiddle.net/bL5sq/

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">  <option value="">Select...</option>  <option value="https://google.com">Google</option>  <option value="https://yahoo.com">Yahoo</option></select>

On Selecting option from select redirect to html page

You could use dataset elements

$("#select").change(function() {  var option = $(this).find('option:selected');  window.location.href = option.data("url");});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="select">  <option data-url="http://www.google.com">USA</option>  <option data-url="http://www.twitter.com">Canada</option></select>

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>

On select change redirect to url jQuery

Setting window.location.href to a variable, and then updating the variable will not set window.location.href

I've moved your onchange code into the jquery and fixed the error.

I've also added the code to add the text from the option to the query string.

$(document).ready(function () {  $("#select-opt").change(function() {    var $option = $(this).find(':selected');    var url = $option.val();    if (url != "") {      url += "?text=" + encodeURIComponent($option.text());      // Show URL rather than redirect      $("#output").text(url);      //window.location.href = url;    }  });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script><select id="select-opt">  <option value="">Select one</option>  <option value="test-select1.html">Value 1</option>  <option value="test-select2.html">Value 2</option>  <option value="test-select3.html">Value 3</option></select><div id="output"></div>

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

Multiple Select Options Redirect

You can use jQuery get the value of each select box using val()

For example

// If selectBox1 is set to A and selectBox2 is set to B, then redirectLocation will be AB
var redirectLocation = $("#selectBox1").val() + $("#selectBox2").val();

// Redirect to the URL with the selected values
window.location.href = "http://yourdomainIguess.com/" + redirectLocation;

An important thing to note is that your selectboxes value is different from the text content. You can define a value that's different from the selectbox display using the value attribute in HTML.

For example

<select id="selectBox1">
<option value="A">Alpha</option>
<option value="B">Beta</option>
<option value="C">Charlie</option>
</select>

On these if you use $("#selectBox1").val() you'll get A, B or C. If you want the text content instead, use $("#selectBox1").text() and it will give you Alpha, Beta, or Charlie

If you want to use the selected index instead of the text or value then you can use jQuerys prop function to get a selectboxes selected index

// Will give us 1B if we select A and B
var redirectLocation = ($("#selectBox1").prop('selectedIndex')+1) + $("#selectBox2").val();

// Redirect to the URL with the selected values
window.location.href = "http://yourdomainIguess.com/" + redirectLocation;

Keep in mind that Index will be 0 based. So the first option will return 0 and the second will return 1. I've added one to the index in the code to make it give a 1 for the first element instead.

You can also check these values to redirect to different pages

// Store our values
var selectVal1 = $("#selectBox1").val();
var selectVal2 = $("#selectBox2").val();

if(selectVal1 == 'A' && selectVal2 == 'B'){
// If the selected values are A and B then go to google
window.location.href = "https://www.google.com/";
}
else {
// Otherwise go to Yahoo
window.location.href = "https://www.yahoo.com/";
}

If you want to run the redirect on the select box change you can just bind the event like this

// Use the ID of the select box to bind an event
$("#selectBox1").change(function() {
// Do things in here

var selectVal1 = $("#selectBox1").val();
var selectVal2 = $("#selectBox2").val();

if(selectVal1 == 'A' && selectVal2 == 'B'){
window.location.href = "https://www.google.com/";
}
else {
window.location.href = "https://www.yahoo.com/";
}
});

How to redirect form action based on selected option value?

i changed your code and made new jquery function which may help you! please go through it!

      <form method="get" action="" role="search">
<select id="country">
<option value="">Select Location</option>
<option value="10">USA</option>
<option value="3">Canada</option>
<option value="4">Singapore</option>
<option value="5">India</option>
<option value="6">China</option>
</select>
<button type="button" id="buttonId">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type = "text/javascript" language = "javascript">
jQuery(document).ready(function() {
jQuery("#buttonId").click(function() {
var country_value = $('#country').val();
var country_name = $('#country :selected').text();
window.location = "http://www.yourdomain.com/hotels/search/"+country_name + "/" +country_name +"/" + country_value +"?checkin=%F%F&checkout=%F%F&adults=0&child=0";

});
});
</script>

How to redirect to a new window after click on option of select about html?

You can try this as well :

<select onchange="(this.options[this.selectedIndex].value?  window.open(this.options[this.selectedIndex].value,'_blank'):'')">
<option value='' >Select...</option>
<option value='http://www.google.com'>Google</option>
<option value='http://www.yahoo.com'>Yahoo</option>

How do I redirect to different page with same option selected?

<script type="text/javascript">    var select = document.getElementById('selectForm')    window.onload = function () {        if (getCookie("selection")) {            document.getElementById("help_option").value = getCookie("selection");        } else {            document.getElementById("help_option").value = "default";        }        select.onsubmit = function () {            document.cookie = "selection=" + (document.getElementById("help_option").value);            return false;        }    }    function getCookie(cname) {        var name = cname + "=";        var decodedCookie = decodeURIComponent(document.cookie);        var ca = decodedCookie.split(';');        for (var i = 0; i < ca.length; i++) {            var c = ca[i];            while (c.charAt(0) == ' ') {                c = c.substring(1);            }            if (c.indexOf(name) == 0) {                return c.substring(name.length, c.length);            }        }        return "";    }</script>
<form id="selectForm">    <div class="select-wrap">        <div class="select-container">            <select id="help_option">                <option value="default" selected="true" disabled="disabled">How can we help?</option>                <option value="enquiry">General Enquiry</option>                <option value="audit">Audit</option>                <option value="tax">Tax</option>                <option value="advisory">Advisory</option>            </select>        </div>    </div>    <input class="btn btn--dark" id="submit" type="submit" value="Ask Us"></form>


Related Topics



Leave a reply



Submit