Parameterise DropDown values as URL using JavaScript?

Question

I have the code below. It has 3 dropdown option values. Currently, on change of dropdown selection an alert is thrown.

Now, I want to achieve the following: parameterise my dropdown values as URL's, so that i.e. when I enter the following URL in a browser: file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html with ?mySelect=BMW at the end, then the browser opens the dropdown with the value BMW populated.

Or if I enter file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html?mySelect=Audi, the browser opens the dropdown with Audi populated.

 <!DOCTYPE html>
    <html>
    <body>

    <p>Select a new car from the list.</p>

    <select id="mySelect" onchange="myFunction()">
      <option value="Audi">Audi
      <option value="BMW">BMW
      <option value="Volvo">Volvo
    </select>


    <p id="demo"></p>

Need to modify below script, to parameterise dropdown selection as URL, please advise.

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

Answered, Snippet will not work please copy the code and then change the url's parameter to see the results — Ahmed Ali, Nov 20 '19 at 12:54
@Ibnelaiq im entering file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html with ?mySelect=BMW and Audi still shows selected, im using notepad ++ — user12403387, Nov 20 '19 at 13:25
Copy my select and options. And make sure that you have jquery attached — Ahmed Ali, Nov 20 '19 at 13:30

Ahmed Ali · Answer 1 · 2019-11-20T13:29:40.597

1

You can easily fetch the url's parameter using expressions and some conditions to select the option. Change mySelect value in url to check it. JAVASCRIPT:

    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
$(document).ready(function(){
    var data = getUrlVars()["mySelect"];
if(data == "Audi"){
  $('select').prop('selectedIndex', 0);
}
else if(data == "BMW"){
$('select').prop('selectedIndex', 1);
}
else if(data == "Volvo"){
$('select').prop('selectedIndex', 2);
}
});

HTML:

<select>
  <option class="Audi">Audi</option>
  <option class="BMW">BMW</option>
  <option class="Volvo">Volvo</option>
</select>

edited Nov 20 '19 at 13:29

answered Nov 20 '19 at 12:53

Ahmed Ali

1,908
14
28

what URL shall I enter? – user12403387 Nov 20 '19 at 13:03
Like this , `?mySelect=Audi` at url – Ahmed Ali Nov 20 '19 at 13:03
1

You could improve this by getting rid of the `if` statements in the document ready handler and just loop and compare the values. That way, if the OP adds more items to the select then they don't need to modify the code. – Reinstate Monica Cellio Nov 20 '19 at 13:52
@archer Wait for a while. I will do – Ahmed Ali Nov 20 '19 at 13:53

score 0 · Answer 2 · edited Nov 20 '19 at 13:31

0

You can read url params once select box loads, see below code

HTML:

    <!DOCTYPE html>
        <html>
        <body>

        <p>Select a new car from the list.</p>

        <select id="mySelect" onchange="myFunction()" onload="setMySelect()">
          <option value="Audi">Audi
          <option value="BMW">BMW
          <option value="Volvo">Volvo
        </select>


        <p id="demo"></p>


<script>
 function setMySelect() {
    var urlParams = new URLSearchParams(window.location.search);
    var mySelect = urlParams.get('mySelect');
    if(mySelect)
    document.getElementById("mySelect").value = mySelect;
}
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

edited Nov 20 '19 at 13:31

David Thomas

249,100
51
377
410

answered Nov 20 '19 at 12:58

Bhushan Kawadkar

28,279
5
35
57

this does not seem to work, its not even executing the function – user12403387 Nov 20 '19 at 13:18
@Bhushan Kawadkar this does not seem to work please advise – user12403387 Nov 20 '19 at 13:23
Basically when I open FireFox, and enter the url file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html with ?mySelect=BMW BMW is not selected on the dropdown it still shows Audi, also if I enter file://test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html with ?mySelect=Volvo still Audi is shown – user12403387 Nov 20 '19 at 13:37
When you enter the url on browser and hit ENTER button then url stays same or it get changed after page load? If url is getting changed after page load then this solution will not work, you need to make changes on server end to preserve the url or read request param with backend code and pass it to page so that page can read the params and set select box values accordingly – Bhushan Kawadkar Nov 20 '19 at 13:46

score 0 · Answer 3 · answered Nov 20 '19 at 12:59

use this answer to extract search queries. Then just set value on load with the proper value.

<script>
function setValue(value) {
  document.getElementById("mySelect").value = value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

UPDATE to have both in the same script.

<script>
function setValue(value) {
  document.getElementById("mySelect").value = value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
let urlParams = new URLSearchParams(window.location.search);
setValue(urlParams.get('mySelect');
</script>

score 0 · Answer 4 · answered Nov 20 '19 at 13:50

You could try the following.

var url = new URL(window.location);
var params = new URLSearchParams(url.search.slice(1));
for (let [key, value] of params.entries()) {
    if(params.has(key) && key == "mySelect") {
        document.getElementById(key).value = value;
    }
}
document.getElementById("mySelect").addEventListener("change", (e) => {
    params.set("mySelect",e.target.value);
    url.search = params.toString();
    let new_url = url.toString();
    window.location.assign(new_url);
})

score 0 · Answer 5 · answered Nov 20 '19 at 14:02

I needed the following window.onload as this function was not getting loaded.

<!DOCTYPE html>
            <html>
            <body>

            <p>Select a new car from the list.</p>

            <select id="mySelect" onchange="myFunction()" onload="setMySelect()">
              <option value="Audi">Audi</option>
              <option value="BMW">BMW</option>
              <option value="Volvo">Volvo</option>
            </select>


            <p id="demo"></p>


    <script>
     <!-- function setMySelect() { -->

     window.onload = function() {
        var urlParams = new URLSearchParams(window.location.search);
        var mySelect = urlParams.get('mySelect');
        if(mySelect)
        document.getElementById("mySelect").value = mySelect;
    }
    function myFunction() {
      var x = document.getElementById("mySelect").value;
      alert (document.getElementById.innerHTML = "You selected: " + x);
    }
    </script>

    </body>
    </html>

Parameterise DropDown values as URL using JavaScript?

5 Answers5