使用Javascript将URL中的值传递到下拉列表中

Question

I have a url as follows

http://*****************?ContentId=1335&clientName=Sam&clientPhone=123&clientEmail=an@gmail.com&clientCountry=United%20Kingdom.

clientCountry is a name of a drop down list in my form and I want to pass the value (United Kingdom) into that drop down list using Javascript.

I have been able to do this so far

function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') +    1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var first = getUrlVars()["clientName"];
var second = getUrlVars()["clientPhone"];
var third = getUrlVars()["clientEmail"];
var fourth = getUrlVars()["clientCountry"];

Now I do not know how to pass the variable fourth into the drop down list. Can anyone assist as I am a total novice with javascript?

Answer 1

If you have already populated the dropdown list, this should work for preselecting the value from the URL:

var dropDowns = document.getElementsByTagName('select'), opts, i;
for(i = 0, l=dropDowns.length;i<l;++i){
  if(dropDowns[i].name === 'countryList'){
    opts = dropDowns[i].getElementsByTagName('option');
    for(i = 0, l = opts.length;i<l;++i){
      if(opts[i].value === fourth){
        opts[i].selected = true;
        break;
      }
    }
    break;
  }
}

Make sure this runs after you print the markup for the select by binding to the document ready event, or include it somewhere in the page after you print the markup for the dropdown list. It uses the fourth variable from the code you included, so that should have run when you run this.