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

June 22, 2024 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><ahref="Page2.html?select=one">Select One</a><ahref="Page2.html?select=two">Select Two</a><ahref="Page2.html?select=three">Select Three</a></html></body>

Page2.html

<html><head><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><script>
$(document).ready(function() {
  var select = GetUrlParameter("select");
  $("#" + select).attr("selected", "");
});

functionGetUrlParameter(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];
            returnfalse;
        }
    });
    return value;
}
</script></head><body><selectid="select"><optionid="one">One</option><optionid="two">Two</option><optionid="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><htmllang="en"><head><title>Page A</title><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></head><body><h1>This is page A</h1><ul><li><ahref="page_b.html?op=ans1">Pick one</a></li><li><ahref="page_b.html?op=ans2">Pick two</a></li><li><ahref="page_b.html?op=ans3">Pick three</a></li></ul></body></html>

Page B:

<!DOCTYPE html><htmllang="en"><head><title>Page B</title><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></head><body><h1>This is page B</h1><divstyle="margin-bottom:20px;"><ahref="page_a.html">Back to page A</a></div><div><select><optionid="default"> - </option><optionid="one">Option one</option><optionid="two">Option two</option><optionid="three">Option three</option></select></div><script>functiongetParameterByName(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:

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

Page B:Html:

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

jQuery:

functiongetParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = newRegExp("[\\?&]" + 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

<ahref="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:

functiongetQueryVariable(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