jQuery mobile - 动态切换选择菜单到多个答案

【问题标题】：jQuery mobile - dynamically switch Select Menu to MultiplejQuery mobile - 动态切换选择菜单到多个
【发布时间】：2015-09-03 13:03:46
【问题描述】：

当我选中复选框时，我想启用多选，但它不起作用。如何使用 jQuery mobile 实现这一点？

<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
 </select>

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").attr('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").attr('multiple',false);
        }
    });
});

【问题讨论】：

你好。我编辑了你的问题。我已经分离了 HTML 和 JS 代码 sn-ps 以便它们具有正确的语法着色。另外，我修复了一些代码样式，缩进。如果您有任何问题 - 请与我联系。

标签： javascript jquery jquery-mobile jquery-mobile-select

【解决方案1】：

试试这个

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
  </style>
</head>
<body>

  <input type="checkbox" id="toggle"> Toggle Select
   <select name="targets" id="targets">
         <option value="0">-----Select a option ----</option>
         <option value="1">option 1</option>
         <option value="2">option 2</option>
         <option value="3">option 3</option>
   </select>

  <script>
  $(document).ready(function(){

       $("#toggle").on('click',function(){
        if($(this).is(':checked')==true){ 
         $("#targets").attr('multiple',true).attr("data-native-menu","false");
        }else{
         $("#targets").attr('multiple',false);
        }
      });

  });
  </script>

</body>
</html>

【讨论】：

它在jquery中可以工作，但在jqeury mobile中不起作用，包括jquery mobile css文件。

【解决方案2】：

您正在使用attr() 函数，该函数适用于简单的 HTML 属性。
但是，在较新版本的 jQuery（1.6 之后）中，对于 readonly、checked、multiple 等元素属性，您需要使用 jQuery prop() 函数。

尝试改变功能：

$(document).ready(function() {
    $("#toggle").on('click', function() {
        if ($(this).is(':checked') == true){ 
            $("#targets").prop('multiple', true).attr("data-native-menu","false");
        } else {
            $("#targets").prop('multiple',false);
        }
    });
});

你可以阅读更多关于jQuery.prop()here的信息。

这是我的JS Fiddle Demo，它有效。

【讨论】：

我知道它在 jquery 中运行良好，但在 jquery mobile 中不运行。谢谢 .@Yeldar
哦，我明白了。尝试使用$('#targets').attr('multiple', 'multiple')。不是很好用吗？

【解决方案3】：

在标记中以 data-native-menu="false" 开头：

<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
    <option value="0">-----Select an option ----</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

然后在复选框更改事件上，销毁 selectmenu 小部件，更新 multiple prop，并重新初始化它：

$("#toggle").on('change', function () {
    $("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});

DEMO

如果您想要单选的本机菜单，请将代码更改为：

$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({  nativeMenu: !$(this).is(':checked')});

DEMO

【讨论】：