I´m using jquery mobile and trying to use the select menu form in a way that would allow me once I select an option to go to a specific part of my html page. Here is the code snippet I have but it doesn´t seem to work on safari nor safari mobile.
<select id="mymenu">
<option value="">Select a site</option>
<option value="#page1">Page1</option>
<option value="#page2">Page2</option>
</select>
<script type="text/javascript">
var selectmenu=document.getElementById("mymenu");
selectmenu.onchange=function(){
var chosenoption=this.options[this.selectedIndex];
if (chosenoption.value!="nothing"){
window.open(chosenoption.value, "", "");
}
}
</script>
Would you say that I should use another event?
Related
I am trying to display the first 5 options as default in rendering select2.
Select countries
____________
America
Canada
England
France
Spain
I made it multiple and used selected, so it could display but not as straightforward like the above.
How can I set it up like this?
I used the open option, so it displays them like above.
$('#id').select2('open')
However, when I click on anywhere on the screen, it closes. How can I keep it open all the time?
Lets say that your Dropdown HTML is like below:
<select multiple="multiple" id="s1" style="width: 300px">
<option value="1">America</option>
<option value="2">Canada</option>
<option value="3">England</option>
<option value="4">France</option>
<option value="5">Spain</option>
</select>
If you want to always keep Open the dropdown, you can use following code. This prevents the closing by overriding the callback method.
$(doucment).ready(function() {
var list = $('#s1').select2({
closeOnSelect: false,
}).on("select2:closing", function(e) {
e.preventDefault();
}).on("select2:closed", function(e) {
list.select2("open");
});
list.select2("open");
});
Please see the working JSFiddle
I am trying to ignore all calls to refresh (because they generate errors when I set data-role="none") in jQuery Mobile without removing the actual calls.
<div data-role="none">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-role="none">
<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>
The following call generates an error in javascript (because the data-role="none").
$('#select-choice-1').selectmenu('refresh');
The error I receive is:
Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
This error does not exist if I remove data-role="none".
Is there a way to ignore/override the call to refresh? I have tried to use jQuery .unbind and .off but without success, example:
$(document).on("pageinit", "#mypage", function( event ) {
$('#select-choice-1').unbind('refresh');
});
I don't want to remove the calls to refresh in Javascript unless I have to because I want it to be easy to reapply the jQuery Mobile style at a later time. Does anyone have a solution to this problem?
try:
if($('#select-choice-1').selectmenu()){
$('#select-choice-1').selectmenu('refresh');
}
or
if($('#select-choice-1').data("role")!="none"){
$('#select-choice-1').selectmenu('refresh');
}
You can't call a method of an object thant doesn't exist.
If you want to disable .selectmenu() widget, you need to modify this globally on mobileinit. Moreover, there is no need to add data-role="none".
This way, select tag won't be enhanced/styled with jQM and will be left untouched (native look).
If you do so, you aren't ought to use .selectmenu("refresh"), because the widget is disabled.
To tell jQM not to style select tag, bind global modifications to mobileinit, add them after jQuery and before jQuery Mobile JS libraries.
jQuery Mobile 1.3.2 and below
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.page.prototype.options.keepNative = "select";
});
</script>
<script src="jquery.mobile-1.3.2.min.js"></script>
Demo
jQuery Mobile 1.4
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.keepNative = "select";
});
</script>
<script src="jquery.mobile-1.4.0-rc.1.min.js"></script>
Demo
I am try to use custom multiselect on iOS, using jquery mobile 1.3.2, but when I set the flag data-native-menu=false, nothing happens, no native select is used, and certainly no custom select pops up, nothing. here is the code
<select name="poimain_category_select" id="poimain_category_select" multiple="multiple" data-native-menu="false" data-placeholder="true"">
<option id="poinmain_category_select_holder" value=""><%print(T('SELECT_CATEGORY'))%></option>
<%print(poidata['category_data'])%>
</select>
I had the same problem with tapHold. I added "-button" to my id when binding and it worked.
From HTML-file:
<select id="selectVaapen" data-native-menu="false" data-inline="false">
<!-- Empty -->
</select>
From javascript-file:
$(function() {
$("#selectVaapen-button").bind('taphold', function(event) {
console.log("tapholdHandler");
});
});
I have this beautiful select menu made with jQuery Mobile, it's working perfectly when using a desktop browser. But one I build an android project and click the menu, it shows nothing.
More bizarre, when I change the displayed page, then the select options show up.
???
Is that normal?
<fieldset data-role="controlgroup" style="margin-top:0px;">
<select name="select-pays" id="select-pays">
<option>Pays</option>
<option value="1">First choice</option>
<option value="2">Second choice</option>
<option value="3">Third choice</option>
</select>
</fieldset>
We have the following HTML:
<option value="4def1b88a1247">Text</option>
When using jquery-ui select menu, the option is changed to:
<span class="ui-selectmenu-status">Text</span>
How do we get a jquery-ui selectmenu option to link to another page? We have tried onclick, but this also gets removed when the select menu is re-written.
We just want our options to link to pages without the need of a form to be submitted, is this possible with jquery-ui selectmenu?
Define your select element:
<select id="my_menu">
<option value="/page1.html">Go to Page 1</option>
<option value="/page2.html">Go to Page 2</option>
</select>
And then use the change event to fire the link:
$('#my_menu').selectmenu({
change: function() {
if($(this).val() != '') {
window.location = $(this).val();
}
}
});
According to the documentation here, https://github.com/fnagel/jquery-ui/wiki/Selectmenu, there are callback events that can be used. You mentioned that you tried onclick...perhaps using the change and select callbacks will work instead?
The documentation is from the Felix Nagel version of the plugin by the way, which the FilamentGroup people say on their page is an improved version of there's.