javascript - 检测 jquery mobile 1.4 中选择菜单的变化

Question

在没有使用几个版本之后，我正在重新访问 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/

Answer 1

好的，您想知道更改事件发生后选择的选项的值；您应该执行以下操作：-

$('#current-option').change(function () {
  var optionSelected = $(this).find('option:selected');
  //var optTextSelected = optionSelected.text();
  var optValueSelected = optionSelected.val();
});

我会要求您更改您的选择标签的名称、ID 和类名。

Answer 2

这不是在移动环境中，而是使用移动插件：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());
});

Answer 3

在生成选择菜单后，我查看了 DOM。看起来 select-menu 插件会创建一个divid 类似于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();
    }
});

这在很大程度上取决于插件的渲染方法保持不变，或者在开发人员维护插件的使用时，代码是围绕设计的。我相信这会给你你所需要的。

这是一个小提琴演示

Answer 4

您需要的事件是“selectmenuchange”，jQuery mobile 会为选择而不是“更改”触发此事件。

它应该是这样的：

    $('#current-option').on('selectmenuchange',function () {
       $('#thelabel').text($(this).val());
    });