Search code examples
jqueryhtmljquery-mobile

JQuery Mobile - Hide Dropdown Option

I have a drop down and I want to hide certain options, except when I use JQuery Mobiles enhancement version through data-native-menu="false", the option (Test 2) does not hide. Going further, I will need to also update these dynamically as the user selects each option.

http://jsfiddle.net/AzdaR/

<select data-mini="true" data-native-menu="true">
    <option>Test 1</option>
    <option style="display: none">Test 2</option>
    <option>Test 3</option>
</select>

<select data-mini="true" data-native-menu="false">
    <option>Test 1</option>
    <option style="display: none">Test 2</option>
    <option>Test 3</option>
</select>
Solution

  • When using custom select menus your select DOM is replaced with other DOM elements on the build process. So you can't hide option elements and expect that your custom select menu also hides them.

    However you can disable the option using disabled="disabled".

    <select data-mini="true" data-native-menu="false">
    <option>Test 1</option>
    <option disabled="disabled">Test 2</option>
    <option>Test 3</option>
</select>

    See this working demo