Dynamically set the value of select dropdown using query string paramater

Question

To begin with, I'm new to Javascript.

I have a form with a select element with various options and I do not have access to change the form. There are no id's to the options, but just the values as shown in the code below.

    <form>
    <select class="country" name="country" id="countryid">
        <option value="usa" selected="selected">USA</option>
        <option value="canada">Canada</option>
        <option value="japan">Japan</option>
        <option value="china">China</option>
        </select>
    </form>

My goal is to populate the field in the above form automatically based on the url parameters. For example, www.example.com?country=china should populate China in the form field. The following is the javascript code:

<script>
var param1var = getQueryVariable("country");

function displayresult(){
    //document.getElementById(param1var).selected=true; //if there was id given in     the form field
        //cannot use document.getElementByValue(param1var).selected=true;
    //document.querySelectorAll('input[value=' + param1var + ']').selected=true; does not work
}

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}
</script>

I cannot use document.getElementById(param1var) because there is no id.
Javascript does not support document.getElementByValue(param1var).
document.querySelectorAll is not working.

Is there a way that I can reference the element using the option value?

Thanks!

You could just loop through the options until you find the value you’re looking for … — C3roe
– C3roe, Commented Nov 12, 2013 at 23:03
possible duplicate of Is there any fast way to get an <option> from a <select> by value, using JavaScript? — showdev
– showdev, Commented Nov 12, 2013 at 23:04

PSL · Accepted Answer · 2013-11-12 23:03:30Z

3

You can just do it this way by setting the value of the select element. Also note that value is case sensitive, plus make sure that the function displayresult runs on onload or after the element appeared in the html.

document.getElementById("countryid").value=param1var;

Demo

answered Nov 12, 2013 at 23:03

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically set the value of select dropdown using query string paramater

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related