通过php填充多个选择框jquery mobile
Posted
技术标签:
【中文标题】通过php填充多个选择框jquery mobile【英文标题】：Populate mulitple select box jquery mobile via php 【发布时间】：2013-04-10 17:41:10 【问题描述】：我发现这个链接适用于 jquery 但不适用于 jquery-mobile 多选
Link to other post
我可能会出错的任何想法。一旦我添加了多个 =“多个”，我就没有显示任何结果。另外，如果我丢失了它，我没有得到 jquery 移动主题，但我确实得到了我的列表
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="css/logout-button.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/jquery.cookies.2.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index4">
<div data-theme="a" data-role="header">
<a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Event Details
</h3>
</div>
<div data-role="content">
<form id="eventForm" name="eventForm">
<div data-role="fieldcontain">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index4", function()
$(function()
var items="";
$.getJSON("event-details.php",function(data)
$.each(data,function(index,item)
items+="<option value='"+item.email+"'>"+item.username+"</option>";
);
$("#a1_title").html(items);
$("#a1_title").trigger("change");
);
);
);
</script>
<select id="a1_title" multiple="multiple">
</select>
</div>
<div data-role="fieldcontain">
<label for="manual">Add Emails</label>
<textarea cols="40" rows="8" name="emails" id="emails"></textarea>
</div>
<input type="submit" value="Submit" id="submitEventButton">
</form>
</div>
</div>
</body>
</html>
我的 php
require_once("../backend/functions.php");
dbconn();
$id = $CURUSER["id"];
$res = "SELECT email,username FROM users left join cal_contacts on cal_contacts.contactid = users.id WHERE cal_contacts.userid = $id";
$res1 = mysql_query($res);
$data = array();
while($row = mysql_fetch_array($res1))
$data[] = $row;
echo json_encode($data);
【问题讨论】：
对不起，它确实有效，但您必须使用移动设备而不是我的网络浏览器从列表中选择 $("#a1_title").trigger("change");成功了。我更新了置顶帖 【参考方案1】：jQuery Mobile 与经典的多选框有点不同。
你没有做错任何事，你缺少一个额外的属性。没有它，jQuery Mobile 多选无法成功创建。
额外需要的属性是这个：
data-native-menu="false"
工作示例：http://jsfiddle.net/Gajotres/dEXac/
$(document).on('pagebeforeshow', '#index', function()
// Add a new select element
$('<select>').attr('name':'select-choice-1','id':'select-choice-1','multiple':'multiple', 'data-native-menu':'false').appendTo('[data-role="content"]');
$('<option>').html('Select option!').appendTo('#select-choice-1');
$('<option>').attr('value':'1').html('Value 1').appendTo('#select-choice-1');
$('<option>').attr('value':'2').html('Value 2').appendTo('#select-choice-1');
// Enhance new select element
$('select').selectmenu();
);
还有一件事，你不需要使用：
$("#a1_title").trigger("change");
在你的情况下这是一个矫枉过正，你只需要增强一个动态选择，这样做：
$('select').selectmenu();
要了解更多信息，请查看我的另一篇文章：jQuery Mobile: Markup Enhancement of dynamically added content
【讨论】：
以上是关于通过php填充多个选择框jquery mobile的主要内容，如果未能解决你的问题，请参考以下文章