On select change redirect to url jQuery

Question

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>

I don't think it's helping that you're mixing inline script (in the `onchange`) and the jQuery script. Try doing everything everything in the jQuery. Also, setting the `window.location.href` into a variable and then updating the variable does **not** update the `window.location.href` — freefaller, Oct 11 '18 at 08:28
You need to take the value of your selected option for your redirect, such as "option.val()" or "$(this).find('option:selected').val()". This you need to use with "window.location.href = " instead setting the url. — Daniel Frech, Oct 11 '18 at 08:30

freefaller · Accepted Answer · 2018-10-11T08:40:25.377

1

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>

edited Oct 11 '18 at 08:40

answered Oct 11 '18 at 08:33

freefaller

17,790
6
50
80

Yes, exactly this is working perfectly fine as per my requirement, I just checked, I think I will have to encode url so doesn't add `%20` in text – Sanjeev Kumar Oct 11 '18 at 08:40
If you don't want `%20` then I suggest you use `+` instead, as having spaces in the URL (even in the query string) is not a good idea – freefaller Oct 11 '18 at 08:42
So you mean adding `+` within option text? – Sanjeev Kumar Oct 11 '18 at 08:45
No, add `.replace("%20", "+")` to the result of `encodeURIComponent` – freefaller Oct 11 '18 at 08:47
Thanks very much! – Sanjeev Kumar Oct 11 '18 at 09:02
You're welcome @Sanjeev - good luck with the rest of your project – freefaller Oct 11 '18 at 09:07

score 0 · Answer 2 · edited Oct 11 '18 at 08:32

0

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>

edited Oct 11 '18 at 08:32

Shubham Baranwal

2,333
2
12
23

answered Oct 11 '18 at 08:28

Jack Bashford

38,499
10
36
67

Thanks for the answer but on select change I also wanted to send `Value 1` in url query parameter or whichever is selected – Sanjeev Kumar Oct 11 '18 at 08:30
For adding query parameter in URL you can refer this [stackoverflow](https://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript). @SanjeevKumar – Shubham Baranwal Oct 11 '18 at 08:34

Martin · Answer 3 · 2018-10-11T09:32:25.617

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.

On select change redirect to url jQuery

3 Answers3