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

Question

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

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

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

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

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

Answer 1

Простое решение — использовать

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

При этом в поле выбора создается событие onchange, которое перенаправляет вас на URL-адрес, хранящийся в поле значения выбранного параметра.

Answer 2

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

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

и следующий JQuery создает список <div> элементов, a переходит к 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 3

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

$("[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> ценить.

Answer 4

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

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

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