jQuery移动多选菜单显示项？答案

【问题标题】：JQuery mobile multiple select menu display items?jQuery移动多选菜单显示项？
【发布时间】：2012-05-13 07:43:40
【问题描述】：

我在 Jquery Mobile 1.1 中有一个多选菜单。我知道默认行为是在您选择项目并关闭菜单后显示所选项目和数字。

我的问题是我宁愿总是显示第一个项目和数字而不是所选项目。例如，如果我有一个菜单：

<select name="color-choice" id="color-choice" data-mini="true" multiple="multiple" data-native-menu="false" >
   <option>Color Choices</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
</select>

并且用户选择红色和绿色，我希望关闭菜单读取“颜色选择 (2)”而不是默认的“红色、蓝色 (2)”。

这是为了节省空间，因为我有几个菜单，想省掉标签，让用户一眼就知道菜单是“颜色选择”，他们选择了 2。

可能吗？

【问题讨论】：

对此没有任何选择，但将其破解到 JQM 中应该不难。检查 selectmenu 插件，查看插件选项是如何定义的，设置您自己的选项（最佳数据属性）并在构建函数中，找到文本显示。而不是显示文本，而是检查您的新选项。如果定义了选项，则使用它，否则默认 JQM。
@Steve，我知道这是旧的，但我使用的是 jQuery Mobile 1.4.5。是否有任何更改允许这样做，或者有没有人有如何做到这一点的例子？

标签： jquery select jquery-mobile menu

【解决方案1】：

添加一个函数，该函数将在选择选项时保存所选项目，然后重置为默认选项。

<select name="color-choice" id="color-choice" data-mini="true" multiple="multiple" data-native-menu="false" >
    <option value="" selected="selected">Color Choices</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>
<div>
    <input style="display:none;" id="hidden-choice" name="hidden-choice" value="" />        
</div>


$(document).ready(function(){

    $('#color-choice').change (function (e) { 
            hidden-choice.value = document.getElementById('color- choice').value;
            color-choice.value = "";
    });
});

希望这会有所帮助。

【讨论】：