Выберите Меню, перейдите по ссылке на выберите с помощью JQuery? - PullRequest
Новая
       50

Выберите Меню, перейдите по ссылке на выберите с помощью JQuery?

2 голосов
/ 21 апреля 2010

У меня есть следующий HTML:

HTML-разметка 

<ul id="test">
   <li><a href="http://www.yahoo.com">yahoo</a></li>
   <li><a href="http://www.google.com">Google</a></li>
</ul>

И немного JS-кода:

JQuery / код JavaScript 

$('ul#test').each(function()
{
   var select=$(document.createElement('select')).insertBefore($(this).hide());
   $('>li a', this).each(function()
   { 
 option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
});

Этот код создает выпадающее меню выбора, именно то, что я хочу, но мой вопрос, как мне перейти к URL при выборе? Так что, если я нажму Yahoo, это приведет меня к yahoo.com?

Спасибо за вашу помощь!

Ответы [ 5 ]

7 голосов
/ 21 апреля 2010 
$('ul#test').each(function()
{
   var select=$(document.createElement('select')).insertBefore($(this).hide());
   $('>li a', this).each(function()
   { 
 option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
   select.change(function(){
    //alert('url = ' + this.value );
    window.location.href = this.value;
  })
});

протестировано работает демо в основных браузерах.

1 голос
/ 26 мая 2010 
<select name="dest" class="selec" onchange='document.location.href=this.options[this.selectedIndex].value;'>
1 голос
/ 21 апреля 2010

Это должно сделать это: 

 $('ul#test').each(function()
    {
       var select=$(document.createElement('select')).insertBefore($(this).hide());
       $('>li a', this).each(function()
       { 
     option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
     option.click(function(){window.location = $(this).val())});
       });
    });
1 голос
/ 21 апреля 2010

добавить событие изменения к созданию выбора и отправить пользователя к выбранному значению. 

var select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  document.location.href = $(this).val();
});
1 голос
/ 21 апреля 2010

Попробуйте: 

$('ul#test').each(function()
{
   // also give the select an id
   var select = $(document.createElement('select')).attr('id', 'myselect').insertBefore($(this).hide());

   $('>li a', this).each(function()
   { 
     option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html());
   });
});

Теперь для перенаправления .... 

$(function(){
  $('#myselect').live('change', function(){
    document.location.href = $(this).val();
  });
});

Метод live () , используемый, поскольку поле выбора динамически создается в DOM.

...