CODEWITHSUNDEEP
jqueryhtmlhtml-listsanchor
Joe Morales
Joe Morales

Reputation: 941

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

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>

Upvotes: 3

Views: 5439

Answers (5)

Dave
Dave

Reputation: 10924

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>

Upvotes: 6

Brandin
Brandin

Reputation: 916

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>

Upvotes: 1

dhouty
dhouty

Reputation: 1989

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");
});

Upvotes: 0

Ivaylo Petrov
Ivaylo Petrov

Reputation: 1172

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.

Upvotes: 0

AmanVirdi
AmanVirdi

Reputation: 1685

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");

Upvotes: 0

Related Questions