How to jump to a particular page's some drop-down's particular value using JavaScript?

Question

Suppose we have a drop-down like for "Page2.html":

Page2.html

<div id="myDropDownLink">
    <select id="first-drop" name="first-drop">
        <option value="Select a State">Select a Steate</option>
        <option value="NY">New York</option>
        <option value="NJ">New Jersey</option>
    </select>
</div>

Now, from "Page1.html", we have a link like

Page1.html

<a href="abc.html" id="mylink">go to page 1</a>

So the goal is:

on click of that link, it will go to "Page2.html" and it will select the second drop down value and will be selected. for example, it will select the second drop down value ie "NJ" one. Can we do it programmatically?

I am able to go to the specific page drop-down location. But i failed to select the second value form the drop-down.

window.location.href = forwardedWebsiteLink + "?" + "#first-drop";

Any idea which can do this?

Where are you getting the information that it should select that particular value? Is that being accessed from somewhere, or do you intend to just hardcode it? — Patrick Roberts, Jul 25 '17 at 19:21
just now, I need the static/hard-coded value. if i can get the hard-coded value, later I can do it dynamic. Just think about the above situation, if user clicks on "go to page 1", it will go to the first.html and will change the value to "NU" that means of "Page2" — blueMoon, Jul 25 '17 at 19:40

Jeff Noel · Accepted Answer · 2017-07-25T19:56:37.083

You could combine two things: URI Anchors (adding # in your uri) and GET parameters (? followed by values) to make something like example.com#first-drop?firstDropDown=nj

In JavaScript (on page2.html) all you'd have to do would be this:

//Run the script on page load.
window.onload = function() {
  var url = window.location.href;

  //Let me cheat since we don't have page1 and page2 in this example...
  url += "#firstDropDown?firstDropDown=ny";

  // Select the text after the # and before the ? symbol.
  var dropDown = url.substring(url.indexOf('#') + 1, url.indexOf('?') - 1);
  
  // Select the text after the ? symbol
  var selectedOption = url.substring(url.indexOf('?') + 1);

  // Filter the dropdown's ID and its value into an object.
  selectedOption = {
    elem: selectedOption.substring(0, selectedOption.indexOf('=')),
    value: selectedOption.substring(selectedOption.indexOf('=') + 1)
  };

  // Get the dropdown DOMElement in the page so we can change the selectedIndex.
  dropDown = document.querySelector('#' + selectedOption.elem);
  
  var index = 0, selectedIndex = 0;

  // Loop through dropDown's children element to find the right one.
  dropDown.childNodes.forEach(function(elem, i) {
    // Make sur to look for DOMElement nodes only.
    if (elem.nodeType == 1) { 

      if (elem.value === selectedOption.value) {
        elem.setAttribute("selected", "selected");
        selectedIndex = index;
        return true;
      }
      index++;
    }
  });
  // Now that we have the right index, let's make sure it's selected.
  dropDown.selectedIndex = selectedIndex;
}

<select id="firstDropDown">
  <option value="nj">New Jersey</option>
  <option value="ny">New York</option>
  <option value="la">Los Angeles</option>
</select>

Running the snippet will select New York as the city.

Technically a URI where the querystring is located after the hash is considered malformed, but I suppose that avoids the potential mess of unintentionally sending a GET query to the server. — Patrick Roberts, Jul 25 '17 at 20:03
That's good to know. Thank you for the information (I always thought the querystring was after the hash). — Jeff Noel, Jul 26 '17 at 12:44
A good way to memorize the correct order is to remember that a server never sees the hash, but it does see the querystring, assuming it's placed correctly. The URI is truncated just before the `#` when sent off into the interwebs. — Patrick Roberts, Jul 26 '17 at 13:33

score 1 · Answer 2 · answered Jul 25 '17 at 19:56

When you redirect, you can pass the value on the location.search which can be parsed using any of the numerous methods described here:

On the page 1, you could pass the parameter like this:

window.location.href = forwardedWebsiteLink + "?first-drop=NJ#first-drop"

On page 2, you could do something like this using jQuery BBQ $.deparam():

if (location.hash === '#first-drop') {
  var value = $.deparam.querystring()['first-drop']

  $('#first-drop [value]')
    .removeAttr('selected')
    .filter(function () { return this.value === value })
    .attr('selected', 'selected')
}

score 0 · Answer 3 · answered Jul 25 '17 at 19:48

I'd modify the link to the second page a bit:

<a href="page2.html?state=ny" id="mylink">New York</a>

Then on page 2, I'd add some JavaScript that runs when the page loads.

let params = (new URL(document.location)).searchParams;
let state = params.get("state");

(See searchParams for more information)

Then you get a reference to your select box:

let dropdown = document.querySelector('#first-drop');

And then set the value to the state that was passed in.

dropdown.value = state;

I can't remember off-hand if the value is case-sensitive, but just in case, modify your dropdown a bit:

<div id="myDropDownLink">
    <select id="first-drop" name="first-drop">
        <option value="Select a State">Select a Steate</option>
        <option value="ny">New York</option>
        <option value="nj">New Jersey</option>
    </select>
</div>

I think something like that would work. I haven't tested it, though.

Good luck.

How to jump to a particular page's some drop-down's particular value using JavaScript?

Page2.html

Page1.html

3 Answers3