CODEWITHSUNDEEP
jquerycssjquery-mobile
vini
vini

Reputation: 4742

selected item not showing up in jquery mobile select - nativedroid

enter image description here

Even if i select an item in the select list it doesn't show up on the select box.

Please find below my code for the css:

    <li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain">
<label for="select-choice-1b" class="select">Type:</label>
     <div class="ui-select">
    <div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
    <select len="50" calculated="false" related_module="" required="" id_name="" group="" type="enum" name="account_type" data-native-menu="false">
    <option value=""></option>
    <option value="Analyst">Analyst</option>
    <option value="Competitor">Competitor</option>
    <option value="Customer">Customer</option>
    <option value="Integrator">Integrator</option>
    <option value="Investor">Investor</option>
    <option value="Partner">Partner</option>
    <option value="Press">Press</option>
    <option value="Prospect">Prospect</option>
    <option value="Reseller">Reseller</option>
    <option value="Other">Other</option>
    </select>
    </div>
    </div>
    </li>

Please help i am new to jquery mobile.

Upvotes: -1

Views: 343

Answers (1)

ezanker
ezanker

Reputation: 24738

Instead of injecting the jQM CSS yourself, just add the regular HTML markup and then call .enhanceWithin() on the containing DOM element to force jQM to add all the styling and functionality.

Given this page markup:

<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div>  
    <div role="main" class="ui-content">
        <div id="container"></div>
    </div>  
</div>

The following script will dynamically add a listview with a select box in the first listitem:

var dyn = '<ul data-role="listview"><li><select name="account_type" id="account_type" data-native-menu="false"><option value=""></option><option value="Analyst">Analyst</option><option value="Competitor">Competitor</option><option value="Customer">Customer</option><option value="Integrator">Integrator</option><option value="Investor">Investor</option><option value="Partner">Partner</option><option value="Press">Press</option><option value="Prospect">Prospect</option><option value="Reseller">Reseller</option><option value="Other">Other</option></select></li></ul>';

$("#container").empty().append(dyn).enhanceWithin();

Here is a DEMO

Upvotes: 2

Related Questions