Adding arguments in url to choose values in multiple drop downs on page using javascript/jquery

Question

I am trying to create a webpage where the content changes depending on which drop down options the user has selected. Once the user has made his first choice, the content of a drop down menu can be an additional nested drop down menu with another choice the user must make.

I am now trying to figure out how I can pre-select options by passing parameters in the URL for both the first drop down and a number of nestet drop downs.

I have the basic functionality down. Here's my HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js_select.js"></script>
<script type="text/javascript" src="js_drop.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">

<select id="select" class="div-toggle" data-target=".my-info-1">
    <option id="one" value="noselection" data-show=".noselection">
        Choose option
    </option>
    <option id="two" value="2015" data-show=".2015">
        2015
    </option>
    <option id="three" value="2014" data-show=".2014">
        2014
    </option>
 </select>

<div class="my-info-1">
    <div class="noselection hide">
        No choice made
    </div>

    <div class="2015 hide">
        2015        
    </div>

    <div class="2014 hide">

        A nested drop down within the 2014 selection:<br><br>

            <select id="select" class="div-toggle" data-target=".my-info-2">
                <option id="one" value="noselection2" data-show=".noselection2">
                    Choose option
                </option>
                <option id="two" value="s1" data-show=".s1">
                    January
                </option>
                <option id="three" value="s2" data-show=".s2">
                    February
                </option>
            </select>

            <div class="my-info-2">
                <div class="noselection2 hide">
                    No choice made
                </div>
                <div class="s1 hide">
                    Information about January   
                </div>
                <div class="s2 hide">
                    Information about February
                </div>
            </div>  

    </div>
</div>

Here's my css.css:

.hide {
  display: none;
}

And here's js_drop.js that makes content appear depending on the user selection. I found the script here: Change the content of a div based on selection from dropdown menu:

$(document).on('change', '.div-toggle', function() {
  var target = $(this).data('target');
  var show = $("option:selected", this).data('show');
  $(target).children().addClass('hide');
  $(show).removeClass('hide');
});
$(document).ready(function(){
    $('.div-toggle').trigger('change');
});

I am now adding functionality to make it possible to link to a specific drop down selection and any nested selections by adding parameters to the URL, like in:

http://example.com/page.html?select=three&selectnested=two

I am using js_select.js for this function. I found the code here: How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?

$(document).ready(function() {
  var select = GetUrlParameter("select");
  $("#" + select).attr("selected", "");
});

function GetUrlParameter(name) {
    var value;
    $.each(window.location.search.slice(1).split("&"), function (i, kvp) {
        var values = kvp.split("=");
        if (name === values[0]) {
            value = values[1] ? values[1] : values[0];
            return false;
        }
    });
    return value;
}

My guess at a solution would be to:

Change id on my second <select> to id="selectnested"
Add the following code to my js_select.js above the function

The code:

$(document).ready(function() {
  var select = GetUrlParameter("selectnested");
  $("#" + select).attr("selected", "");
});

But this solution does not choose a selection with-in the nested drop down when the page loads using my example URL above.

Any hint on solving this would be much appreciated.

score 0 · Answer 1 · answered Feb 25 '17 at 21:16

The issue is that you have multiple elements with the same ID (both <select>s have the ID "select", the <option>s have repeated IDs "one", "two" and "three").

Change the IDs of the <select> and <option> elements so they don't conflict with each other.

Example:

<select id="select" class="div-toggle" data-target=".my-info-1">
    <option id="select-one" value="noselection" data-show=".noselection">
        Choose option
    </option>
    <option id="select-two" value="2015" data-show=".2015">
        2015
    </option>
    <option id="select-three" value="2014" data-show=".2014">
        2014
    </option>
</select>
...
<select id="nested" class="div-toggle" data-target=".my-info-2">
    <option id="nested-one" value="noselection2" data-show=".noselection2">
        Choose option
    </option>
    <option id="nested-two" value="s1" data-show=".s1">
        January
    </option>
    <option id="nested-three" value="s2" data-show=".s2">
        February
    </option>
</select>

This way, in your initialization function, you can do:

$(document).ready(function() {
    // First selection menu options
    var select = GetUrlParameter("select");
    $("#select-" + select).attr("selected", "");

    // "Nested" selection menu options
    var select = GetUrlParameter("selectnested");
    $("#nested-" + select).attr("selected", "");
});

And due to those prefixes (select- and nested-) jQuery will only find one element with that ID, and you'll hopefully have no more trouble!

Adding arguments in url to choose values in multiple drop downs on page using javascript/jquery

1 Answers1