Перейти к URL-адресу после выбора опции в optgroup

Question

Я хочу узнать, как использовать JavaScript (или библиотеку jQuery), чтобы перейти к URL-адресу, указанному как значение тега параметра внутри тега optgroup.

С простым, один на уровне выбора тегов, содержащих теги опционных, решение может быть аналогичен описанному in this post:

<FORM NAME="nav"><DIV> 
<SELECT NAME="SelectURL" onChange= 
"document.location.href= 
document.nav.SelectURL.options[document.nav.SelectURL.selectedIndex].value"> 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html" 
SELECTED>Please select an item: 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/"> 
Main page on HTML forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html"> 
Choices in HTML forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html"> 
Tables and forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html"> 
Form submission methods (GET and POST) 
</SELECT><DIV> 
</FORM> 

Я пытался использовать его с определенным тегом два уровня с опцией тегов внутри optgroup tags - и это не работает для меня. Я был бы признателен за помощь в адаптации этого кода.

Answer 1

Используйте это, чтобы сделать это, когда пользователь выбирает опцию:

$('select[name="SelectURL"]').change(function() { 
    window.location.replace($(this).val()); 
}); 

Или это, когда пользователь нажмет отправке кнопка:

$('form[name="nag"]').on('submit' function(e){ 
    e.preventDefault(); 
    window.location.replace($('select[name="SelectURL"]').val()); 
}); 

Вы также должны очистить вас HTML, как это:

<FORM NAME="nav"> 
    <DIV> 
     <SELECT NAME="SelectURL"> 
      <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html" SELECTED>Please select an item:</OPTION> 
      <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/"> Main page on HTML forms</OPTION> 
      <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html"> Choices in HTML forms</OPTION> 
      <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html"> Tables and forms</OPTION> 
      <OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html"> Form submission methods (GET and POST)</OPTION> 
     </SELECT> 
    <DIV> 
</FORM> 

Answer 2

Прежде всего избавиться от встроенного обработчика события OnChange:

<FORM NAME="nav"><DIV> 
<SELECT NAME="SelectURL"> 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/jsnav.html" 
SELECTED>Please select an item: 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/"> 
Main page on HTML forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/choices.html"> 
Choices in HTML forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/tables.html"> 
Tables and forms 
<OPTION VALUE="http://www.cs.tut.fi/~jkorpela/forms/methods.html"> 
Form submission methods (GET and POST) 
</SELECT><DIV> 
</FORM> 

Затем просто добавить слушатель события:

$(document).ready(function() 
{ 
    $('select[name=SelectURL]').change(function(v) 
    { 
    window.location.replace($(this).val()); 
    }); 
});