Обнаружить изменение выбора в jquery mobile 1.4
Я пересматриваю JQM после того, как не использовал его для нескольких версий.
У меня есть простая коробка выбора
<select name="current-option" id="current-option" class="current-option" data-native-menu="false">
<option>Select Option</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
Я хочу быть в состоянии обнаружить изменение в этом поле выбора и затем прочитать его значение. Кажется, что типичные методы jquery не работают, и я не вижу события для этого в API: http://api.jquerymobile.com/selectmenu/
5 ответов
Хорошо, вы хотите узнать значение опции, выбранной после события изменения; Вы должны сделать следующее:-
$('#current-option').change(function () {
var optionSelected = $(this).find('option:selected');
//var optTextSelected = optionSelected.text();
var optValueSelected = optionSelected.val();
});
Я бы попросил вас изменить имя, идентификатор и имена классов для вашего тега выбора.
Это не в мобильной среде, а с использованием мобильных плагинов: Fiddle
HTML
<select name="current-option" id="current-option" class="current-option" data-native-menu="false">
<option>Select Option</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<label id='thelabel'></label>
JavaScript
$('#current-option').change(function () {
$('#thelabel').text($(this).val());
});
Вам нужно событие "selectmenuchange", jQuery Mobile запускает это событие для выбора вместо "изменения".
Должно получиться так:
$('#current-option').on('selectmenuchange',function () {
$('#thelabel').text($(this).val());
});
Я посмотрел на DOM после создания меню выбора. Похоже, что плагин выбора меню создаст div
с идентификатором, аналогичным идентификатору select
; в этом случае это будет current-option-listbox
, Дети этого div
состоят из нескольких вещей, включая варианты. Исходя из этого, я пришел к следующему решению:
var currentValue = ""; // keep track of the selected value
$('.ui-btn-inner', '#current-option-listbox').click(function () {
if ('a', this).text() !== currentValue) {
// the value changed - do stuff
currentValue = $(this).children('a').text();
}
});
Это сильно зависит от того, останется ли метод рендеринга плагина тем же или от разработчика, поддерживающего использование плагина, вокруг которого разрабатывался код. Я верю, что это даст вам то, что вам нужно.
Вот демо-скрипка
обычно приведенный ниже код должен работать. Но я не уверен. Попробуйте, пожалуйста.
$('#current-option').change(function () {
$('#thelabel').text($(this).val());
});