jqueryjquery-mobilejquery-mobile-select

JQuery Mobile 1.3 Select menu dynamic refresh


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


Solution

  • 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