0

我发现这个链接适用于 jquery 但不适用于 jquery-mobile 多选

链接到其他帖子

我可能会出错的任何想法。一旦我添加多个 =“多个”，我就没有显示任何结果。另外，如果我丢失了它，我没有得到 jquery 移动主题，但我确实得到了我的列表

html

<!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);
4

1 回答 1

0

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：动态添加内容的标记增强

于 2013-04-17T22:15:39.053 回答