CODEWITHSUNDEEP
jqueryhtmljquery-mobile
user2158259
user2158259

Reputation: 137

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>

Upvotes: 3

Views: 2456

Answers (2)

letiagoalves
letiagoalves

Reputation: 11302

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

Upvotes: 1

Marc
Marc

Reputation: 7894

I just want to correct a misspelled word

"disabled="disabled">Test 2"

Upvotes: 0

Related Questions