Заполните множественное поле выбора jquery mobile через php

Я нашел эту ссылку, которая работает с 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);
Источник

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: разметка Улучшение динамически добавляемого контента.

Источник
Другие вопросы по тегам