Связывание со списком (JQuery предпочтительн)

Question

мне интересно, если кто имеет опыт, используя плагин JQuery, который преобразует HTML

<select> 
    <option> Blah </option> 
</select> 

выпадающий во что-то (вероятно, Див), где выбор элемента действует так же, как щелкнув ссылку.

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

Ваши советы, опыт и рекомендации приветствуются.

Answer 1

Простое решение заключается в использовании

$("#mySelect").change(function() { 
    document.location = this.value; 
}); 

Это создает OnChange события на поле выбора, который перенаправляет на URL, хранящемся в поле значения выбранной опции.

Answer 2

Этот бит JavaScript в «выберите»:

onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}" 

Это не идеальный (потому что форма представления в ASP.NET MVC, которые я использую, кажется, не использовать механизм маршрутизации для URL-адресов) но он выполняет свою работу.

Answer 3

Я не уверен, где вы хотите перейти по ссылке при нажатии Div, но учитывая то, как это, возможно, будет работать:

<select id="mySelect"> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</options> 
</select> 
<div id="myDiv"/> 

и следующий JQuery создает список <div> элементов, необходимо идет к URL-адресу, основанному на значении опции:

$("#mySelect option").each(function() { 
    $("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) { 
     location.href = "goto.php?id=" + event.data; 
    }); 
}); 
$("#mySelect").remove(); 

Это делает то, что вы хотите?

Answer 4

Если вы собираетесь иметь много отдельных ящиков, которые вы хотите, чтобы использовать в качестве редиректа, без необходимости определять их самостоятельно, попробовать что-то похожее на:

$("[id*='COMMON_NAME']").change(function() { 
    document.location = this.value; 
}); 

И ваши выберите коробки быть названы соответственно:

<select id="COMMON_NAME_001">...</select> 
<select id="COMMON_NAME_002">...</select> 

Это создает OnChange событие для всех идентификаторов, содержащих «COMMON_NAME» сделать редирект значения <option>.