How To Create A Hyperlink That Directs To A Page With Pre-selected Option In A Drop-down Menu?

November 21, 2022 Post a Comment

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 me

Solution 1:

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>

Solution 2:

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>

Solution 3:

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:

Baca Juga

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

Solution 4:

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.

Solution 5:

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

Html5 Tutorial