After upgrading to jQuery Mobile 1.1.1 earlier today (7/13/2012) I noticed that all of my Custom Select menus no longer show the placeholder text on page load. Is there something I need to do differently in 1.1.1 to show the placeholder text in custom select menus? Help!?!?
Here's a sample of my code:
<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
<label for="ceiling" class="select" data-theme="a">Ceiling</label>
<select name="ceiling" id="ceiling" data-theme="a" data-native-menu="false" class="required">
<option data-placeholder="true">Ceiling (Yes/No)</option>
<option value="Yes">Ceiling: Yes</option>
<option value="No">Ceiling: No</option>
</select>
</div>
Sample image (the black bars are my custom select menus):
this code is working for me :
<select>
<option value="" data-placeholder="true">Choose one:</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Just put value="" on your placeholder option
Related
I want to use data-theme d in my select. How ever jQuery Mobile ignores the data-theme="d"and display it as theme a.
<div id="mutualFriends">
<select class="sortBy" name="sortBy" data-url="${url}" data-theme="d">
<option value="">Sort By</option>
<option value="new" selected="selected">Newest</option>
<option value="old">Oldest</option>
<option value="firstName_asc">First Name a-z</option>
</select>
I am using marionette.js and jquery mobile for my application. Following is the code that I have used in template file for drop down but its not working, I have used "data-native-menu=false" for displaying option in popup
<div id="whatDiv" data-role="fieldcontain">
<label >Main Category</label><br>
<select data-native-menu=false>
<option value=1> Balance </option>
<option value=2> 2 </option>
<option value=3> 3 </option>
<option value=4> 4 </option>
<option value=5> 5 </option>
</select>
</div>
Thanx in advance
i think you want like this , see below jsfiddle links
www.jsfiddle.net/57eJm/
I am having a problem with Multiple Select Menu in a jquery-mobile app.
Here is my sample Code (just for demo) http://jsfiddle.net/yesvin/aSBCX/
<div data-role="page" id="one">
<div data-role="content">
<label for="sel">Select the Options </label>
<select name="sel" id="sel" data-native-menu="false" multiple="multiple" >
<option value="">Slect the Options</option>
<option value="1">Prod 1</option>
<option value="2">Prod 2</option>
<option value="3">Prod 3</option>
<option value="4">Prod 4</option>
<option value="5">Prod 5</option>
<option value="6">Prod 6</option>
<option value="7">Prod 7</option>
<option value="8">Prod 8</option>
<option value="9">Prod 9</option>
<option value="10">Prod 10</option>
<option value="11">Prod 11</option>
<option value="12">Prod 12</option>
<option value="13">Prod 13</option>
<option value="14">Prod 14</option>
<option value="15">Prod 15</option>
<option value="16">Prod 16</option>
<option value="17">Prod 17</option>
<option value="18">Prod 18</option>
<option value="19">Prod 19</option>
<option value="20">Prod 20</option>
</select>
click
</div>
</div>
<div data-role="page" id="two">
<div data-role="content">
page 2
</div>
After changing the select menu i need to change the page by clicking the button below the menu. But what happens is, the page change is occured but it will automatically redirect to the previous page where the menu has (In Android). It works fine in desktop. How to prevent this in mobile? and what happens exactly?
Thanks in advance.
NOTE: This is same as this question
but the solution is not working for me...
Even i tried with data-ajax="false" but no luck...
I am using jquery mobile select menu with data-native-menu as false. The issue is if i click select menu, overlay popups on extreme right, instead of above the select menu control. i fixed my page max-width as 400px. Jquery mobile calculating the overlay position based on screen size,hence if i reduced the screen size overlay popup above the select menu control. But how can i make the select menu to overlay within my page size in maximized mode of screen?
<div style="margin:0 auto;">
<div data-role="page" style="width:400px">
<div data-role="fieldcontain">
<label for="select-choice-9" class="select">Shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
Here is the picture. The gray area is the page size (data-role=page). Since I have a bigger monitor, the menu appears on the extreme right.
Set the width on the fieldContain div instead of the parent div
<div data-role="page">
<div data-role="fieldcontain" style="width:400px">
<label for="select-choice-9" class="select">Shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>Choose options</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
Is it possible to hide the default icon used for select menus within jQuery Mobile? By default they use the down arrow icon. I know it's possible to specify an icon via the data-icon attribute, but I haven't found a way to hide it.
Example that's using the default icon:
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
You can use data-iconpos="noicon" like so:
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-iconpos="noicon">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
Any value for the data-iconpos attribute other than: top, right, bottom, or left will not display an icon.
Here is a link to a jsfiddle of this example: http://jsfiddle.net/KWQJf/
For one reason or another on SELECT boxes, the div still remained even though I set data-iconpos='noicon'... SO what I did was a littly hackish, but not bad. I called this Jquery function onload (IN ADDITION to data-iconpos='noicon')
$('.ui-icon.ui-icon-arrow-d.ui-icon-shadow').remove();
Hope this helps anyone who experienced the same problem I did. :)
You can override that style in your own stylesheet:
.ui-select .ui-icon-arrow-d {
display: none;
}