Question

我发现此链接适用于jquery但不适用于jquery-mobile multiselect

我可能会出错的任何想法。一旦我添加多个=“多个”我得到没有结果显示。此外，如果我有它失踪我没有得到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);

Answer 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

1 个答案: