JQuery Mobile 1.3 Select menu dynamic refresh

Question

Hi togehter i using JQM 1.3 and JQuery 1.9.1... i try to get a dynamic selectmenu working without a solution yet.

first i create a selectmenu with createDocument(div...) and .setAttribute(id,...) in the pagebeforeshow event. Then i used a lot of variations first line, second line and combined..

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

nothing worked yet for me..

after i added it i listen to it in the Domready($(#page).ready) function for a change event. In the browser it works very well but on the phone i just cant get it to work. Hope someone can help me.

I also tried the native menu true and false..

thank you

mal

Answer 1

Working example: 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());
    });        
});

One more thing, don't use document ready with jQuery Mobile, they dont work correctly together. Instead use pageinit event. If you want to find more about it look here: jQuery Mobile: document ready vs page events