CODEWITHSUNDEEP
javascriptjqueryhtml
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

On select change redirect to url jQuery

I am trying to redirect to url when a select is changed and add option text in url query parameter, I have tried this but it seems not working:

$(document).ready(function () {
            var url = window.location.href;
            $("#select-opt").change(function() {
                var option = $(this).find('option:selected');
                url = option.data("url");
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="select-opt" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
        <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>

Upvotes: 0

Views: 4740

Answers (3)

Martin
Martin

Reputation: 2414

You can do the following:

$('#select-opt').on('change', function() {
    var selectedOption = $(this).val(); //or use this: $(this).find(':selected').val();
    var parameter = '?text=';
    var parameterValue = $(this).find(':selected').text();
    var url = selectedOption+parameter+parameterValue;
    if(selectedOption != "") {
        alert(url);
        //window.location.href=''+url;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-opt">
    <option value="">Select value</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>

You were actually really close. What you need is to store the value of your select as your url path, but leave the window.location.href as its own function, and simply put the url variable at the end of it.

right now I am just alerting the path for testing / visual purposes in this example. If you remove the alert and out-comment the line below, you would get your desired redirect instead.

Alternatively, you can use

$(this).find(':selected').val()

instead of

$(this).val()

for your selected option value. Depends what version of jQuery you run with I believe.

Upvotes: 0

freefaller
freefaller

Reputation: 19953

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>

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

I fixed your code:

$(document).ready(function () {
    $("#select-opt").change(function() {
        window.location.href = $(this).val();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="select-opt" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
        <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>

Upvotes: 0

Related Questions