Поле со списком связывания (желательно 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-адресов), но выполняет свою работу.