Search jQuery

jQuery Forum

28.vivek.s

data-native-menu="false" attribute is not working in select list

in jQuery Mobile • 9 years ago

Hi,

This is getting a bit crazy, i have two divs in my page and two slect lists in each div.
in first div the code is working as expected but in second div it's not.i have written fallowing code in both div-

     <select onchange="populateStateSelectBox('','ADDR_SHIP_COUNTRY','ADDR_SHIP_STATE');" name="ADDR_SHIP_COUNTRY" id="ADDR_SHIP_COUNTRY" data-native-menu="false" data-theme="c">
             <option value="">Country</option>

            <option value="zx">'''' </option>

            <option value="af">Afghanistan </option>

            <option value="hh">Aftab </option>

            <option value="ar">Aire </option>
    </select>

AS i read this line in jquery docs-**To use custom menus on a specific select, just add the data-native-menu="false" attribute**

i did the same, but it's working in first div but doesn't working in second div..
Any one having any idea why it's happening like that, i am trying to resolve since last 5 hrs, but no luck.. :(
Please some one suggest me where i am wrong

One more thing i would like to add that i am showing first div on page load and second div on a click of a button(Second div is hidden intially)

Replies(1)

Ben Kenobi

Re: data-native-menu="false" attribute is not working in select list

4 years ago

You probably need to set the selects up similar to this:

<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Horizontal controlgroup:</legend>
<label for="select-custom-11">Select A</label>
<select name="select-custom-11" id="select-custom-11" data-native-menu="false">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
<label for="select-custom-12">Select B</label>
<select name="select-custom-12" id="select-custom-12" data-native-menu="false">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
<label for="select-custom-13">Select C</label>
<select name="select-custom-13" id="select-custom-13" data-native-menu="false">
<option value="#">One</option>
<option value="#">Two</option>
<option value="#">Three</option>
</select>
</fieldset>

and if it is dynamically generated - you may need this:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

or possibly you can use something like this:

$( ...new markup that contains select... ).append(data).enhanceWithin();

jQuery Mobile is constantly doing things that I don't get until days or even weeks later - and sometimes then I still scratch my head because I found a way to make it work, but darned if I understand why.

Top Reply

Response title

Attachments

jQuery Forum

data-native-menu="false" attribute is not working in select list

Replies(1)

Re: data-native-menu="false" attribute is not working in select list

Statistics

Tags

Actions

Related Posts