Jquery mobile - 更改后选择菜单修改值答案

【问题标题】：Jquery mobile - select menu modificate value after changeJquery mobile - 更改后选择菜单修改值
【发布时间】：2016-02-02 05:51:33
【问题描述】：

我正在创建我的新应用程序，它是一个 jQuery 移动框架应用程序。我正在使用 ajax 加载多个带有选项的选择。

例如我在代码中创建一个元素：

var select = $('<select name="someSelect" data-placeholder="false" class="select-additional" data-native-menu="false" />');

然后我有一个 ajax 调用，我将对象保存到 var ajaxItems，我创建一个循环并将选项添加到选择中。

for(var i in ajaxItems){
   val option = $('<option val="'+ajaxItems[i].val+'">'+ajaxItems[i].val+' Days</option>');
   select.append(option);
}

现在，一切正常，jQuery 使用 selects 渲染页面，看起来不错。

但我有一个问题：

我想做这样的事情：当用户单击选择时，选项值必须设置为选择中的字符串，默认设置选项的文本，但我想要一个值，例如如果用户单击选项：

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

我想将选择字符串设为 1，而不是 1 天，因为我的选择输入非常小，单位（天）并不重要......

jQuery mobile 渲染代码：

<div class="ui-select">
    <a href="#select-27-listbox" role="button" id="select-27-button" aria-haspopup="true" class="ui-btn ui-btn-a ui-corner-all ui-shadow" data-rel="popup"><span class="select-additional">4 Tage</span></a>
    <select data-native-menu="false" data-id="4084" data-icon="false" data-theme="a" class="select-additional" data-placeholder="false" tabindex="-1">
       <option value="0">0 </option>
       <option value="1">1 Tag</option>
       <option value="2">2 Tage</option>
       <option value="3">3 Tage</option>
       <option value="4">4 Tage</option>
       <option value="5">5 Tage</option>
    </select>
</div>

我正在尝试做这样的事情：

$('ui-select').change(function(
   $(this).prev().find(span.select-additional).text($(this).val());
));

但它不会改变标签，我有 90% 的把握，我做到了，当记录对象 $(this).prev().find(span.select-additional).text() 时，它向我显示了一个值，但改变前的值！例如，如果我拿起 1，它会显示 0，然后当我拿起 2 时，它会显示 1。

我认为问题在于：我正在尝试更改值，但在 jQuery mobile 执行此操作之前，jQuery mobile 会覆盖我的文本...

我知道这是可能的，因为我在另一个 jQuery 移动页面上看到了它，但是在 jQuery 设置值之后我需要一些回调......或者一些延迟？

【问题讨论】：

奇怪，在 jsFiddle 上它的工作...jsfiddle.net/kudej/6gK44

标签： jquery select mobile

【解决方案1】：

好的，我找到了答案。我看到问题出在其他页面上，首先一切正常，我的方法产生了效果。但是在其他页面上，没有任何效果，解决方法是在页面上创建一个make code：

$(document).on("pagecreate", function () {
            $('select').change(function () {
                var value = $(this).val();
                var element = $(this);
                element.prev().find('.select-additional').text(value);
            });
});

【讨论】：