2010-07-13 4 views
0

У меня есть простой сценарий jQuery, который выбирает текущую страницу из статического выпадающего списка, а при изменении выбора сценарий также изменяет атрибут href тега привязки, чтобы отразить изменение навигации. Вот мой код:Изменение страницы из DropDownList с помощью jQuery

<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 &amp; 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> 

Единственное усовершенствование, которое я хотел бы видеть на этом для страницы, чтобы автоматически изменить («авто-клик» якорный тег), когда пользователь выбирает другую страницу из DropDownList.

Заранее благодарен!

+0

чем проблема, вы видите, и почему бы не использовать location.href? – spinon

+0

Не проблема, в основном моя собственная ржавость. См. Ответ KP ниже. – Anders

ответ

2

Если я правильно понял ваш вопрос, вы спрашиваете, как вы автоматически перенаправляетесь на заданный URL, а не на необходимый щелчок?

С помощью Javascript вы можете просто использовать свойство window.location, чтобы перенаправить браузер.

window.location = '/somepath/someurl.htm'; 

Это позволит обойти любую потребность кнопки мыши и т.д. Просто установите местоположение на любое значение выбрано в выпадающем списке.

+0

О, да, я забыл об этом. Я снова погружаюсь в веб-разработку, и я настолько сосредоточился на jQuery, что забыл, что простой javascript может многое сделать для меня. Спасибо за простое и очевидное решение! – Anders

0

Пробег: window.location.replace(). Он автоматически перенаправляет страницу.

1

Вот стройнее версия о том, что я думаю, что вы пытаетесь сделать:

<!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 &amp; Gutter Protection</option> 
      <option value="PatioDoors">Patio Doors</option> 
     </select> 

    </div> 
</body> 
</html> 
+0

Прохладный, спасибо за это упрощение. Не могли бы вы разобраться, как это работает немного, так как я пытаюсь (пере) учиться jQuery и т. Д.? – Anders

+0

Первый, который, я считаю, говорит: «Измените атрибут параметра внутри PageSelectDropDown на выбранный, где значение - cPage». Второй, кажется, «Когда я меняюсь, измените расположение страницы на ...». Я вижу, что таким образом исключается проверка if if, я должен был игнорировать текущую страницу, если она была выбрана. Событие даже не срабатывает, если вы снова выбираете ту же опцию, чтобы оператор if совершенно не нужен. – Anders

+0

Вы совершенно правы. – a7drew

Смежные вопросы