Fatal编程技术网
  • javascript/
  • Javascript jQuery mobile-动态地将选择菜单切换到多个

Javascript jQuery mobile-动态地将选择菜单切换到多个

javascript jquery jquery-mobile

Javascript jQuery mobile-动态地将选择菜单切换到多个,javascript,jquery,jquery-mobile,jquery-mobile-select,Javascript,Jquery,Jquery Mobile,Jquery Mobile Select,我想在选中复选框时启用多重选择，但它不起作用。如何使用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

我想在选中复选框时启用多重选择，但它不起作用。如何使用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);
        }
    });
});

切换选择
-----选择一个选项----
选择1
选择2
选择3
$（文档）.ready（函数（）{
$（“#切换”）。打开（'单击'，函数（）{
如果（$（this）.is（':checked'）==true）{
$（“#目标”）.attr（'multiple'，true）.attr（“数据本机菜单”，“false”）；
}否则{
$（“#目标”）.attr（'multiple'，false）；
}
});
});
试试这个

<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>



切换选择
-----选择一个选项----
选择1
选择2
选择3
$（文档）.ready（函数（）{
$（“#切换”）。打开（'单击'，函数（）{
如果（$（this）.is（':checked'）==true）{
$（“#目标”）.attr（'multiple'，true）.attr（“数据本机菜单”，“false”）；
}否则{
$（“#目标”）.attr（'multiple'，false）；
}
});
});
您正在使用
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（）
的更多信息

以下是我的工作原理。

从标记中的数据本机菜单=“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>

如果要使用single select的本机菜单，请将代码更改为：

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

你好我编辑了你的问题。我已经分离了HTML和JS代码片段，以便它们具有正确的语法颜色。此外，我还修复了一些代码样式，缩进。如果您有任何问题，请与我联系。我知道它在jquery中运行良好，但在jquery mobile中不起作用。谢谢。@YeldarOh，我明白了。尝试使用
$（'#targets'）.attr（'multiple'，'multiple'）
。它在jquery中工作，但在jqeury mobile中不工作，包括jquery mobile css文件。 
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({  nativeMenu: !$(this).is(':checked')});