I've finally found the HTML for the jQuery Mobile selector menu component, thanks to my other question, but I'm stuck again.
I'm currently using this code, which works nicely:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">Font Choice:</label>
<select name="select-choice-4" id="select-choice-nc">
<option value="arial">Arial</option>
<option value="papyrus">Papyrus</option>
<option value="helvetica">Helvetica</option>
<option value="calibri">Calibri</option>
</select>
</div>
</div><!-- /content -->
But how do I tell which option has been selected?
It's just like jQuery sans Mobile (perhaps jQuery Immobile?). As with other form elements, use .val() to get the value of the <select>:
$('#select-choice-nc').val();
Related
How to open popup box after selecting the option from drop down list in phonegap. I have gone through documents but only through anchor tag we can acheive that. Please help how can I do this.
Thanks in advance
If you are using select tag for dropdown then bind function onchange() with select tag.
AS
In HTML
<select id = "status_selector" onchange="fnStatusChanged()"></select>
In Java Script
<script>
function fnStatusChanged(){
// Write Something
}
<script>
Given a standard jQM select widget, e.g:
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
and standard popup markp, e.g.:
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Selected Val?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">You selected the item with a value of</h3>
<p id="selectedVal"></p>
OK
</div>
</div>
You can handle the change event of the select and then call the popup widget's open method to launch the popup:
$("#select-native-1").on("change", function () {
var val = $(this).val();
$("#selectedVal").html(val);
$("#popupDialog").popup("open");
});
Here is a working DEMO
<div data-role="fieldcontain">
<select data-mini="true" data-inline="false" data-history="false" data-native-menu="false" data-theme="d" data-overlay-theme="b" name="elArr[]">
<option value="" data-placeholder="true">test</option>
<option value="1">1</option>
</select>
</div>
Hi, I like use data-native-menu with data-histroy attribute same time. data-history property doesn't work. When opened native menu, it add hash ui-state=dialog to location bar.
http://jsfiddle.net/NZ2FJ/
As you can see in the example above, data-placeholder="true" is not working.
Can anyone suggest workaround please?
Also the official document does not show the placeholder.
Thanks in advance.
<div data-role="fieldcontain">
<label for="subject"><em>* </em> Subject: </label>
<select name="subject" id="subject" class="required" data-placeholder="true" data-native-menu="false">
<option value="" >Select subject</option>
<option value="Art">Art</option>
<option value="Band">Band</option>
<option value="Choir">Choir</option>
<option value="Design">Design</option>
<option value="Drama">Drama</option>
...
...
</select><br />
</div>
You have added the attribute data-native-menu="false" which is causing jQM to behave this way
You Example:
http://jsfiddle.net/NZ2FJ/1/
Without the attribute:
http://jsfiddle.net/NZ2FJ/3/
if you want to keep the data-native-menu="false" attribute so you get a pop-up selection box, simply make the first option selected from you js on pageload:
$(document).ready(function () {
$("#subject option:first").attr('selected', 'selected');
});
I updated jquery Mobile to 1.2.0 and it works fine now.
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
i have a select button on a jquery mobile page with a data-native-menu="false". The list of options is too long for a pop-up, that is why jqm uses a page overlay to show the select-menu.
i'd like to use this select menu for navigation, so i bind to the change event a changePage function.
here's what happens: i tap on a list item, the new page slides in and slides out again immediately. My guess is that this happens because the page overlay of the custom select menu wants to go back to the page it was invoked from ?!?
Any ideas to prevent this?
thank you in advance :-))
Here's my code
html:
<div id="one" data-role="page" data-theme="a">
<div >
<div class="myHeader"></div>
</div>
<div data-role="content">
<div id="startbuttons">
PREIS ERMITTELN
<select name="miet" id="miet" data-theme="b" data-native-menu="false" data-icon="false" data-iconpos="center" data-overlay-theme="b">
<option data-placeholder="MIETSTATIONEN">MIETSTATIONEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
<option value="mietstation_dummy.html">HAMBURG</option>
<option value="mietstation_dummy.html">BERLIN</option>
<option value="mietstation_dummy.html">MÜNCHEN</option>
</select>
</div>
<p class="linktxt" data-theme="a">Oder besuchen Sie unsere<br><a data-theme="a" href="hmm.html">Standard-Website</a></p>
<p class="linktxt kontakt"><a data-theme="a" href="hmm.html">Kontakt</a> | <a data-theme="a" href="hmm.html">Impressum</a></p>
</div>
</div>
js:
$('#miet').change(function(event){
var $vn = $('#miet').val();
$.mobile.changePage(''+$vn, { transition: "slide"} );
$('#miet').val('MIETSTATIONEN').selectmenu('refresh');
return false;
});
ps: if i set data-native-menu="true" it works like a charm (but i really like to use the custom select menu)
Not entirely sure if this is what you are looking for (or if you actually solved it), but have a look at this guy's answer on a similar thing (the very last comment on the thread). It might point you in the right direction ;)
JQuery Mobile changePage() flaky when called from dynamically created select option?