jQuery mobile - 动态切换选择菜单到多个
Posted
技术标签:
【中文标题】jQuery mobile - 动态切换选择菜单到多个【英文标题】：jQuery mobile - dynamically switch Select Menu to Multiple 【发布时间】：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 以便它们具有正确的语法着色。另外，我修复了一些代码样式，缩进。如果您有任何问题 - 请与我联系。 【参考方案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
【讨论】：
以上是关于jQuery mobile - 动态切换选择菜单到多个的主要内容，如果未能解决你的问题，请参考以下文章
JQuery mobile动态添加切换开关到listview
jQuery Mobile 1.1.1 自定义选择菜单 - 占位符文本不可见
jQuery mobile：当我将选择菜单附加到不同页面上的另一个 DOM 节点时，为啥会中断？