Изменение значения поля выбора в Zurb Foundation с помощью JavaScript

Мне сложно изменить значение поля выбора в базе Zurb. Я использую настраиваемые формы, которые просто скрывают фактический блок выбора и используют неупорядоченный список в качестве поля выбора. Моя проблема в том, что обычный способ изменения значения поля выбора не работает:

$('#selectboxID').val('something')

В приведенном выше коде предполагается, что значение каждой из опций в поле выбора одинаково с текстом:

<option value="1">1</option>

Я также пробовал:

$($('.dropdown ul li')[1]).addClass('current') 

$($('.dropdown ul li')[0]).removeClass('current') //remove current class from the other one

Но это тоже не работает.

Ответ 1

Вы должны инициировать событие "change" после изменения выбранного индекса.

Пример:

// Change selected option
$('#selectboxID').val('something');
// Or use selectedIndex: $("#selectboxID")[0].selectedIndex = 0;

// Fire change event
$('#selectboxID').trigger('change');

Надеюсь, что это поможет

Ответ 2

Там также альтернативный вариант использования, когда вы сами привязываетесь к событию изменения, вы не можете его запускать. Код для принудительного обновления при выборе:

Foundation.libs.forms.refresh_custom_select(@jQueryElement, true)

где @jQueryElement - это оригинальный скрытый выбор.

Ответ 3

Были внесены некоторые изменения в то, что событие изменения обрабатывается недавно в коде Foundation.

Вы все равно можете достичь того, что хотите, используя метод trigger(), но вам нужно добавить флаг "refresh":

$('#selectboxID').trigger('change', true);

Ответ 4

Если вы используете Foundation 3:

Обновлен до последней версии Foundation 3.

Настройка selectedIndex, используя JQuery val() или все, что запускает событие change, работает из коробки.

Если вы используете Foundation 4:

Кажется, это регресс. В качестве надежного временного решения вы можете принудительно обновить пользовательский выбор с помощью метода refresh_custom_selection, например:

Foundation.libs.forms.refresh_custom_selection($('select'))

Примечание: Это refresh_custom_selection, а не refresh_custom_select!

Нет необходимости использовать последний (или trigger('change', true)), потому что они оба полностью перестраивают пользовательский выбор, т.е. повторно копируют ваши параметры выбора, которые включают в себя множество манипуляций с DOM, и это может медленные вещи вниз много. (В зависимости от размера ваших опций выбора и другого кода)

С другой стороны, refresh_custom_selection просто обновляет отображаемое значение, которое является гораздо более легкой операцией.

PS: Вместо refresh_custom_selection вы также можете использовать

$('a.current', $select.next()).text($('option:selected', $select).text());

Но этот код делает предположения о сгенерированном HTML, поэтому лучше придерживаться методов утилиты