Changing a page from DropDownList using jQuery
I have a simple jQuery script that selects the current page from a static dropdownlist, and when the selection changes the script also modifies the href attribute of an anchor tag to reflect the navigation change. Here is my code:
<select name="PageSelectDropDown" id="PageSelectDropDown">
<option value="Insulation">Insulation</option>
<option value="Windows">Windows</option>
<option value="Siding">Siding</option>
<option value="Roofing">Roofing</option>
<option value="Gutters">Gutters & Gutter Protection</option>
<option value="PatioDoors">Patio Doors</option>
</select>
<a href="" id="clicker">Go!</a>
<script type="text/javascript">
$(document).ready(function () {
//get the current page
var cPage = '<%= ViewData["CurrentPage"] %>';
//select the current page from the list
$("#PageSelectDropDown > option").each(function () {
if ($(this).val().toLowerCase() == cPage.toLowerCase()) {
$(this).attr("selected", "selected");
}
});
//change the link target
$("#PageSelectDropDown").change(function () {
var str = "";
$("#PageSelectDropDown option:selected").each(function () {
str += $(this).val() + " ";
});
$("#clicker").attr("href", "/Product/" + str.trim());
if (cPage != str.trim()) {
$("#clicker").click();
}
});
});
</script>
The only improvement I would like to see on this is for page开发者_运维百科 to automatically change ('auto-click' anchor tag) when the user selects a different page from the dropdownlist.
Thanks in advance!
If I understand your question correctly, you are asking how do you automatically redirect to the given url, instead of having a click needed?
With Javascript, you can simply use the window.location property to redirect the browser.
window.location = '/somepath/someurl.htm';
This will bypass any need for a button click, etc. Just set the location to whatever value is selected in the dropdown.
Here's a slimmer version of what I think you're trying to do:
<!DOCTYPE html>
<html lang"en">
<head>
<title>Select Me</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function () {
var cPage = 'Roofing';
$("#PageSelectDropDown > option[value=" + cPage + "]").attr("selected", "selected");
$("#PageSelectDropDown").change(function () {
window.location.href = "/Product/" + $("#PageSelectDropDown option:selected").attr('value');
});
});
</script>
</head>
<body>
<div>
<select name="PageSelectDropDown" id="PageSelectDropDown">
<option value="Insulation">Insulation</option>
<option value="Windows">Windows</option>
<option value="Siding">Siding</option>
<option value="Roofing">Roofing</option>
<option value="Gutters">Gutters & Gutter Protection</option>
<option value="PatioDoors">Patio Doors</option>
</select>
</div>
</body>
</html>
Try window.location.replace(). It will redirect to the page automatically.
加载中,请稍侯......
精彩评论