How to make a href appended in search bar select option in dropdown?

Question

I have built a one page website that is broken up by section and each section has ids. My client wants to be able to navigate to each section using a href (#'s) in the search bar like

www.website#gohere

And with my sections, this works well. My problem is they just threw a curve ball and I don't know how to go about doing this -

On my page in a certain section called #labSearch I have a dropdown that is populated from a csv file using jQuery here:

var location = arrayOfEvents[i][0];

    if (location != prevLoc)
    {
    select.innerHTML += "<option id = "+"test" +" value=\"" + location + "\">" + location + "</option>";
    }

When a dropdown option is selected, certain divs show up according to the value of the dropdown. They need it so that say the dropdown option is Dallas, when they go:

website.com#Dallas

It takes them to the section with the dropdwin (this is #labSearch) and acts as if the user has selected the Dallas option, meaning the right divs are displayed. I have tried as you can see above giving the options ids, however this does nothing.

How can I make an a href in the search bar select a certain dropdown option? Is this possible?

Why won't the option id work?

Here is my dropdown code in my labSearch section:

<form id="locationForm" style = "width: 70%; margin: auto; padding-bottom: 30px;">
  <select class = "form-control" id="selectNumber" style = "">
    <option>Choose a location</option>
  </select>


</form>

EDIT: Ok at the end of my javascript outside of document ready or anything I have:

var selectHashOption = function () {
        console.log("hash changed");
    var select1 = document.getElementById('selectNumber');
    var parts = location.href.split('#');
    if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        //select1.onchange();
      dropdownChange();
      // Trigger the onchange event handler
    }
};

window.onhashchange = selectHashOption;
});

    </script>

This all works well, except I am unable to call dropdownChange - I get that it is undefined, however I have declared the variable at file scope here:

<script>

var dropdownChange;

Then set it in document ready:

$(".form-control").change(function () {

                  dropdownChange = function()
                  {
                    //stuff

This was explained here Why can I not define functions in jQuery's document.ready()? and I did it as they did. This is BEFORE my hash change window stuff. I can't even call onchange because that is undefined as well. What can I do?

EDIT 2:

I now have my func declared initially at scope level then set here:

dropdownChange = function () {
}
$(".form-control").change(dropdownChange);

In my hash stuff after I tried:

if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        select1.onchange();

    }

and got same this function is undefined. I then call the function directly with:

if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
      console.log("HASH="+hash);
        select1.value = hash;   // Select the option in the dropdown list
        dropdownChange();

    }

And the function is called but the value (I console.log(this.value)) is undefined here -

Answer 1

You can select an option by setting the value attribute of the dropdown list. I assume that the option value matches the hash part of the URL typed by the user.

For this HTML markup:

<select id="select1">
    <option value="Dallas">Dallas</option>
    <option value="New York">New York</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Chicago">Chicago</option>
</select>

You can select the option that matches the hash part of the URL with this code:

var selectHashOption = function () {
    var select1 = document.getElementById('select1');
    var parts = location.href.split('#');
    if (parts.length > 1) {
        var hash = parts[1];    // Get the hash part of the URL
        select1.value = hash;   // Select the option in the dropdown list
        select1.onchange();     // Trigger the onchange event handler
    }
};

window.onhashchange = selectHashOption;

Once the option is selected, I call onchange to trigger the event handler of the dropdown list. Depending on the way the event handler was set, you may need to do it differently, as mentioned in How can I trigger an onchange event manually?.

I needed to monitor the onhashchange event to make it work in my test code, as you can see on the last line of the code sample.