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 -

Im not sure I follow.. you want the correct option in the dropdown to be selected based on the hash in your url? — putvande, Sep 09 '16 at 20:09
Yes, and to navigate to that section of the page. I.e. the dallas option is selected - it navigates to the dropdown on the pg and has dallas selected in the dropdown — blue, Sep 09 '16 at 20:17

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

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.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 09 '16 at 22:42

ConnorsFan

70,558
13
122
146

Alright thank you - now having a problem with my function scope/dynamic. It sets the correct value to the dropdown but can't call on change or any other function (trying to call the function I would normally call) because it thinks it is undefined. See edit asbove – blue Sep 10 '16 at 00:37
Could you define your function as `var dropDownChange = function () { ... };` and assign the event handler as `$(".form-control").change(dropDownChange);`? That way, you could call `dropDownChange` from anywhere, I think. – ConnorsFan Sep 10 '16 at 00:46
Ok - I now have it calling the func properly but it isn't getting the value of the dropdown option see above – blue Sep 10 '16 at 02:10
It's because `this` is not the dropdown list in `dropDownChange`. You should define `var dropDownChange = function (ddl) { /* use ddl instead of this */ };`, and call it like this: `dropDownChange(select1)`. – ConnorsFan Sep 10 '16 at 02:18
With my last suggestion, you would also have to redefine the event handler as: `$(".form-control").change(function () { dropDownChange(this); });`. – ConnorsFan Sep 10 '16 at 11:12
Thank you so much - do you know how to make the window navigate to that part of the page as well? I have tried setting the window.href to #cities (because thats where it needs to go) but that screws up the dropdown – blue Sep 10 '16 at 13:26
You can try the methods suggested in this post: http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript. Some of them scroll the page without modifying the hash. – ConnorsFan Sep 10 '16 at 13:33

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

1 Answers1