populate form select dropdown based on url

Question

I have a drop down that looks like this :

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

How can I pre populate the value to saab, based on the url. I have links on a different page, one for each of these options. I want people to be able to selct the link "saab", some how pass that though the url and make "saab" selected when the page with this form loads. Preferably a java script solution if possible?

possible duplicate of [How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?](http://stackoverflow.com/questions/25207583/how-to-create-a-hyperlink-that-directs-to-a-page-with-pre-selected-option-in-a-d) — Dave, Mar 27 '15 at 16:20
This solution looks promising let me review and get back to you with my updates. thanks! — nick, Mar 27 '15 at 16:21

score 0 · Answer 1 · answered Mar 27 '15 at 16:46

Getting the window's location and parsing out the pathname should do the trick. Then all you have to do is set the selected attribute on the appropriate option in your select drop-down.

Note: This code does not require any dependencies.

function main() {
  var url = new URLParser(window.location);
  var path = url.pathname;

  //Say our pathname is "/saab"
  path = '/saab';

  var selectEl = document.getElementById('make');
  for (var i = 0; i < selectEl.length; i++) {
    var optionEl = selectEl.options[i];
    if (optionEl.value === path.substr(1)) {
      optionEl.setAttribute('selected', 'selected');
    }
  }
}

// I wrote this URL parser a while back. It should be cross-browser safe.
// http://stackoverflow.com/a/27964708/1762224
var URLParser = (function(document) {
  var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
  var self = function(url) {
    this.aEl = document.createElement('a');
    this.parse(url);
  };
  self.prototype.parse = function(url) {
    this.aEl.href = url;
    if (this.aEl.host == "") {
      this.aEl.href = this.aEl.href;
    }
    PROPS.forEach(function(prop) {
      switch (prop) {
        case 'hash':
          this[prop] = this.aEl[prop].substr(1);
          break;
        default:
          this[prop] = this.aEl[prop];
      }
    }, this);
    if (this.pathname.indexOf('/') !== 0) {
      this.pathname = '/' + this.pathname;
    }
    this.requestUri = this.pathname + this.search;
  };
  self.prototype.toObj = function() {
    var obj = {};
    PROPS.forEach(function(prop) {
      obj[prop] = this[prop];
    }, this);
    obj.requestUri = this.requestUri;
    return obj;
  };
  self.prototype.toString = function() {
    return this.href;
  };
  return self;
})(document);

main();

<select id="make">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

populate form select dropdown based on url

1 Answers1