CODEWITHSUNDEEP
jquery-mobile
naresh
naresh

Reputation: 10402

Jquery-Mobile: How to add the data dynamically to the select menu based on the text box value

I am new to jquery mobile. In my UI, one text box and one select menu are there. Initially select menu is empty.If the textbox value is more than 1 then some data is added to the select menu otherwise select menu is empty. For this, i am calling the function at the onchange of select menu but it is not working. Please can anybody help me.

Edit:

Ex:

$('#Goal_Time').bind( "focus", function(event, ui) 
{   
    if(Goal_WeightVar.val() > 0)
    {
        Goal_WtVar = Math.abs(weightVar.val() - Goal_WeightVar.val());
        Min_DurationVar = Math.round(Goal_WtVar * 2.2);
        for(var i=0;i<10;i++)
        {
            $('#Goal_Time').append('<option value=Min_DurationVar>Min_DurationVar</option>');
        }       
    } 
});

thanks

Upvotes: 2

Views: 11687

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85358

Well Kinda working example:

JS

$('#Goal_WeightVar').live('change', function() {
    var weightVar     = 0; // for testing only
    var goalWeightVar = $('#Goal_WeightVar').val();

    if(goalWeightVar > 0)
    {
        Goal_WtVar = Math.abs(weightVar - goalWeightVar);
        Min_DurationVar = Math.round(Goal_WtVar * 2.2);
        for(var i=0;i<10;i++)
        {
            $('#Goal_Time').append('<option value='+Min_DurationVar+'>'+Min_DurationVar+'</option>');
        }      
        $('#Goal_Time').listview('refresh'); 
    } 
});

HTML

<div data-role="page" id="Goal_Time_Page">
    <div data-role="content">
        <label for="Goal_WeightVar">Goal Weight:</label>
        <input type="text" name="Goal_WeightVar" id="Goal_WeightVar" value="" />
        <label for="Goal_Time" class="select">Goal Time:</label>
        <select name="Goal_Time" id="Goal_Time">
            <!-- Add options here -->
        </select>
    </div>
</div>

You will need to tweak it

Upvotes: 3

amiuhle
amiuhle

Reputation: 2773

As it says in the docs of jQuery Mobile, you have to tell the select menu to update it's contents by calling $('select').selectmenu();

If it still doesn't work you'll have to post a little sample code so I can have a look at it.

Edit:

Actually, that's not even necessary. If you have an empty <select id="to-append"></select>, you can just add options via $('#to-append').append('<option value="a">A</option>')!

The onchange event of the select is probably not the right event to do this though. The select will not change as long as it's empty, thus your event will never get triggered. Try the blur event of the text box.

jQuery Mobile Docs - Select

Upvotes: 2

Related Questions