Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

jquery - 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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> 

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...