JQuery Mobile 1.3 Rafraîchissement dynamique du menu de sélection

Question

Bonjour, j'utilise JQM 1.3 et JQuery 1.9.1... j'essaie de faire fonctionner un selectmenu dynamique mais je n'ai pas encore trouvé de solution.

Je crée d'abord un menu de sélection avec createDocument(div...) et .setAttribute(id,...) dans l'événement pagebeforeshow. Ensuite, j'ai utilisé de nombreuses variations : première ligne, deuxième ligne et combinées...

$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");

rien n'a encore fonctionné pour moi

Après l'avoir ajouté, je l'écoute dans la fonction Domready($(#page).ready) pour un événement de changement. Je n'ai pas eu le temps de faire le tour de la question, mais je n'ai pas eu le temps de faire le tour de la question, et je n'ai pas eu le temps de faire le tour de la question. J'espère que quelqu'un pourra m'aider.

J'ai également essayé le menu natif vrai et faux.

merci

mal

Answer 1

Exemple de travail : 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','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();

    $(document).on('change', '#select-choice-1', function(){    
        alert($(this).find("option:selected").text());
    });        
});

Une dernière chose, n'utilisez pas document ready avec jQuery Mobile, ils ne fonctionnent pas correctement ensemble. Utilisez plutôt l'événement pageinit. Si vous voulez en savoir plus, regardez ici : jQuery Mobile : document ready vs page events

Answer 2

Je sais qu'avec un moteur de modèles, c'est peut-être plus facile, mais j'ai essayé la méthode suivante

            function renderItemsKeywords(results) {
        var elementRoot = document.createDocumentFragment();
        var elementDiv = document.createElement("div");
        elementDiv.setAttribute("data-role", "fieldcontain");

        var elementL = document.createElement("label");
        elementL.setAttribute("for", "select-keywords-list");
        elementL.setAttribute("class", "select");
        elementL.appendChild(document.createTextNode("Wähle Eintrag:"));

        var elementSel = document.createElement("select");
        elementSel.setAttribute("name", "select-keywords-list");
        elementSel.setAttribute("id", "select-keywords-list");
        elementSel.setAttribute("data-native-menu", "true");

        var elementOptD = document.createElement("option");
        elementOptD.setAttribute("data-placeholder", "true");
        elementOptD.appendChild(document.createTextNode("Wähle Eintrag"));          
        elementSel.appendChild(elementOptD);

        var allKeywords = $().checkKeywords(results);

        $.each(allKeywords, function(i, item) {
            var elementOptAll = document.createElement("option");
            elementOptAll.setAttribute("value", item);
            elementOptAll.appendChild(document.createTextNode(item));
            elementSel.appendChild(elementOptAll);
        });

        //alert(elementSel.length());

        elementDiv.appendChild(elementL);   
        elementDiv.appendChild(elementSel);

        var elementDivKey = document.createElement("div");
        elementDivKey.setAttribute("id", "keylist");

        elementRoot.appendChild(elementDiv);
        elementRoot.appendChild(elementDivKey);

        return elementRoot;
    };

que l'autre partie

                           case 'keywords':

                html = renderItemsKeywords(itemData);

                $header.find("h1").html("Title");
                $content.html(html);
                $page.page();
                $footer.find(":jqmData(role=navbar)").navbar();
                $content.find(":jqmData(role=listview)").listview();

                $("#select-keywords-list").selectmenu();
                $("#select-keywords-list").selectmenu("refresh");
                break;
            }
            $.mobile.changePage($(this));

J'espère que vous comprenez ce que je fais