How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?

Question

I want to clarify, I am not looking for a way to create hyperlinks within options in a drop-down menu. I am looking for a way to hyperlink to one of those options in a drop-down menu from an external page.

Take for instance the following scenario, there's page A and on page B there's a drop-down menu with X options.

Page A provides a link to page B but once you click and land on page B, an option is pre-defined selected.

It is basically an anchor link but I want it to use as an external link.

Page A: It provides a link to Page B with "Option two" pre-selected

Page B:
<select>
<option id="one">Option one</option>
<option id="two">Option two</option>
<option id="three">Option three</option>
</select>

I believe this may be accomplish with jQuery or so I've been told.

UPDATE: I mistakenly used <ul></ul>, <li></li> when I meant <select></select>, <option></option>

You'll need to do server work. Try studying some MVC style site work with PHP of ASP. Many find ASP easier to learn, but I find it very limiting and sometimes extremely over involved. I'd recommend PHP but it's all in what you find easier to work with. — SpYk3HH, Aug 08 '14 at 16:05
What SpYk3HH suggested is overkill. Just use JavaScript to redirect to page b and append a query string or hash in the URL. Then on page b use JavaScript to read the variable from the URL and set the selected option. You could also use cookies or localstorage to set the selected option. — j08691, Aug 08 '14 at 16:09
@Brandin - When any option is selected/clicked, only its corresponding `div` shows up under the drop-down menu and other divs are hidden `.show()`, `.hide()` — Joe Morales, Aug 08 '14 at 16:20
@Brandin - I just realized where your confusion came from. I updated my entry, I meant to use `` instead of an unordered list. My bad! — Joe Morales, Aug 08 '14 at 16:46

Dave · Accepted Answer · 2014-08-12T22:32:11.867

6

No server work needed

Page1.html

<html>
<body>
<a href="Page2.html?select=one">Select One</a>
<a href="Page2.html?select=two">Select Two</a>
<a href="Page2.html?select=three">Select Three</a>
</html>
</body>

Page2.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(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;
}
</script>

</head>
<body>
  <select id="select">
    <option id="one">One</option>
    <option id="two">Two</option>
    <option id="three">Three</option>
  </select>

</body>
</html>

edited Aug 12 '14 at 22:32

answered Aug 08 '14 at 16:16

Dave

10,748
3
43
54

I'm not sure what I might be doing wrong, but I just copied/pasted in two new HTML docs and test it out but it won't work. Same issue with sample above yours. – Joe Morales Aug 12 '14 at 22:18
1

If you are running locally you need to add the http to the jQuery script reference. Updated this and typos. – Dave Aug 12 '14 at 22:27
No wonder! I actually did add the http but with the www as well, interesting it won't work that way either. Thanks! – Joe Morales Aug 12 '14 at 22:33

score 1 · Answer 2 · edited May 23 '17 at 12:23

On Page A, place links that indicates which option you want pre-selected using GET parameters. On Page B, place JavaScript that reads the GET parameters and then selects the appropriate option. See this question for various ways on getting the GET parameters using JavaScript: How can I get query string values in JavaScript?

In my example I made use of one of the simpler solutions found in that answer. To select your option item you use the attr function, e.g. to select option three in your example you use $('#three').attr('selected','selected');

Page A:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page A</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <h1>This is page A</h1>
    <ul>
        <li><a href="page_b.html?op=ans1">Pick one</a></li>
        <li><a href="page_b.html?op=ans2">Pick two</a></li>
        <li><a href="page_b.html?op=ans3">Pick three</a></li>
    </ul>
</body>
</html>

Page B:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page B</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <h1>This is page B</h1>
    <div style="margin-bottom:20px;">
        <a href="page_a.html">Back to page A</a>
    </div>  
    <div>
        <select>
            <option id="default"> - </option>
            <option id="one">Option one</option>
            <option id="two">Option two</option>
            <option id="three">Option three</option>
        </select>
    </div>
    <script>
        function getParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }
        $(function() {
            var op = getParameterByName("op");
            var op_dict = {ans1:'one', ans2:'two', ans3:'three'};

            if (op in op_dict) {
                var sel = '#' + op_dict[op].toString();
                $(sel).attr('selected','selected');
            }
        });
    </script>
</body>
</html>

I copied and pasted your code exactly as is but I can't get it to work — Joe Morales, Aug 11 '14 at 16:07

score 0 · Answer 3 · answered Aug 08 '14 at 16:15

You can pass the value in query string and extract that value from URL.

Like this:

Page A:

<a href="link/To/PageB?id=two"> Page B</a>

Page B: Html:

 <ul>
       <li id="one">Option one</li>
       <li id="two">Option two</li>
       <li id="three">Option three</li>
    </ul>

jQuery:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var optionId = getParameterByName('id');

$('li#' + optionId).addClass("selected");

score 0 · Answer 4 · answered Aug 08 '14 at 16:15

You can use something like:

Page A

<a href="link/To/Page1#option1"> Page B</a>

Javascript on Page B

$(document).ready(function() {
    var hash = window.location.hash.substring(1);

    if (hash === "option1") {
        // do the selection
    } else {
        // do some other things
    }
});

If you need more help, you will have to tell us what does "select" mean.

score 0 · Answer 5 · answered Aug 08 '14 at 16:20

You could use a query string that contains the id of an option on page B, and then use jQuery to select that option automatically.

For example, your link would be <a href="http://www.yoursite.com/pageB?select=two">Click</a> and your javascript for page B would be something like this:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) { return pair[1]; }
    }
    return(false);
}

$(function() {
    $("li#" + getQueryVariable("select")).addClass("selected");
});

How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?

5 Answers5

Linked