如何使用下拉菜单中的预先选择的选项创建指向页面的超链接? [英] How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?
问题描述
我想澄清,我没有在下拉菜单中寻找在选项中创建超链接的方法。我正在寻找一种方法,可以从外部页面的下拉菜单中超链接到其中一个选项。
以下面的场景为例,有A页和在页面B上有一个带有X选项的下拉菜单。
页面A提供了一个页面B的链接,但是一旦您点击并着陆到页面B上, - 定义选定。
它基本上是一个锚链接,但我希望它可以用作外部链接。
页面A:
它提供了一个页面B的链接,并且预先选择了选项二。 b b b $ b p>
< select>
< option id =one>选项一< / option>
< option id =two>选项二< / option>
< option id =three>选项三< / option>
< / select>
我相信这可能是用jQuery完成的被告知。
更新:我错误地使用了< ul>< / ul> $ c $当我的意思是
< select>< / select>
时,< option>< / option>
需要工作
Page1.html
< html>
< body>
< a href =Page2.html?select = one>选择一个< / a>
< a href =Page2.html?select = two>选择两个< / a>
< a href =Page2.html?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, );
});
函数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;
}
});
返回值;
}
< / script>
< / head>
< body>
< select id =select>
< option id =one> One< / option>
< option id =two>两个< / option>
< option id =three>三< / option>
< / select>
< / body>
< / html>
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>
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>
这篇关于如何使用下拉菜单中的预先选择的选项创建指向页面的超链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!