通過PHP

填寫多張選擇框jQuery Mobile的我發現這個鏈接，與jQuery的作品，但不使用jQuery移動多選通過PHP

在那裏我可能會錯誤的任何想法。只要我添加多個=「多個」我沒有結果顯示。另外，如果我有它缺少我不明白的jQuery Mobile的主題，但我得到填充我的列表

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

來源

2013-04-17 Steven Kinnear

對不起它的工作，但你必須使用一個移動設備不是我的網頁瀏覽器，從列表中選擇 –

$（「＃ a1_title 「）引發（」變化「）;做的伎倆。我已經更新了最高職位 –

的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

來源

2013-04-17 22:15:39 Gajotres

回答

相關問題