Use different library instead of jQuery Mobile for <select> - javascript

I've looked all over the place to try and find a way to somehow disable jQuery Mobile's selectmenu widget so that I can use a 3rd party library for a <select></select>. In my case, I want to use the Chosen library. Is there any way I can do this, while still retaining the rest of the jQuery Mobile styling on my page?

You can tell jQM to ignore the select by adding data-role="none"
<select id="mySelect" data-role="none" placeholder="Select an option..." >
<option value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Here is a demo using the Selectize plugin for the select and other controls use jQM:
DEMO

Related

How do I set a certain number of options in select 2?

I need to make an analog of the size attribute in the Select2 plugin as in the default select. I can't find it in the docks.
Here's how implemented in default
Sorry for English :)
In html you can use disabled ether on the entire selection or option as showing in your image, here is an example :
<select>
<option value="1" disabled>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4" disabled>option 4</option>
</select>
as you can see you can't select option 1 and 4

Multiple Select in jquery 1.3.2 does not work in popup

If I have the multiselect directly on the page, it works and displays fine; but if I have the multiselect on the popup, the display is wrong and it only shows one element. Can someone tell me why and how to fix it?
I show my problem in this jsfiddle: http://jsfiddle.net/uvvm40Lu/4/ (click on the popup link).
And this is my code:
<select id="transactionType0" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
popup
<div id="popup1" data-role="popup" data-overlay-theme="a">
<select id="transactionType1" multiple="multiple" data-native-menu="false" size="7">
<option value="Mo">Mo</option>
<option value="Di">Di</option>
<option value="Mi">Mi</option>
<option value="Do">Do</option>
<option value="Fr">Fr</option>
<option value="Sa">Sa</option>
<option value="So">So</option>
</select>
If you look at the popup documentation: http://api.jquerymobile.com/1.3/popup/, you will see that it does not support popup chaining (i.e. one popup open over another popup). Unfortunately the multi-select uses a popup to display the choices, so it violates the popup chaining issue.
There is a jQM plugin called simpledialog2 that does allow chaining: http://dev.jtsage.com/jQM-SimpleDialog/demos2/, or you can roll your own.

Multiselect dropdown

How do you make a combobox with multiselect option? Using Javascript or HTML. allows you to select multiple options but does not provide a combo/dropdown structure.
That is not standard HTML functionality. There is either a dropdown, or a multiselect. What you can use, is a library that can handle the conversion, like http://harvesthq.github.com/chosen/.
What about this?
<select multiple>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
</select>

on option item is selected

EDIT:
I forgot http:// on the links. This is not my problem. I'll fix the question...
i have some options, like this:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
To this i have a jquery listener, looks like this:
$('.mySelect').change(function(){
window.location.replace($(this).val());
});
Since this just responds to a change made, i can't be redirected to "www.url1.com". What should i use? I only get suggestions for change on google.
EDIT 2: I've got a bunch of solutions on using a dummy as first option. I also got the other solution of using a button to read the selected option and then redirect, but that's not usable in the project i'm working on, even if these are really good solutions otherwise.
In this case, i want it to listen for usage, even if the change is made to itself, like i'm selecting the first option (that's selected by default) i want it to do something with it - In the case above a redirect. I'll leave it open if someone have a good solution to this problem.
Try putting in an empty valued first option:
<select class="mySelect">
<option value="">Please select...</option>
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
You can then amend your jQuery to make sure there is a value before redirecting:
$('.mySelect').change(function(){
var value = $(this).val();
if (value != "") {
window.location.replace(value);
}
});
Example fiddle
Note also that http:// (or whichever protocol you're using) is required on the link values.
Updated
If you would prefer to not have the dummy option, you would need to change the logic to work on button click:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>
$("#redirect").click(function() {
window.location.replace($(".mySelect").val());
});
You have to put http:// also
window.location.replace("http://"+$(this).val());
One option can be that you change the first option like
<select class="mySelect">
<option value="select">Select URL</option> <!--Default displayed--->
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
or you can use click jquery event for combo box .
<form>
<select class="mySelect">
<option value="" selected="selected">Please Select</option>
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
</form>​
$(".mySelect").change( function() {
var n = $(this).val();
if(n != "") {
window.location.assign("http://"+n);
}
});​

Jquery selectbox script not auto-initializing

I am trying to implement the jquery selectbox script. I have made all the changes needed to css and html markup and the selectbox is working and appearing fine. the problem is. It is not initializing automatically at page load.
I have to manually run $("SELECT").selectBox(); from the firebug script panel to make it work. I have tried everything from putting hte initializing command at the bottom of the page, and putting it in $(document).ready() as well. Nothing works. What am i missing?
EDIT: The code I am running involves dynamic select box generation from the server.
I googling for a solution to a similar problem, but found nothing.
It's giant waste of time. So I will just share the solution found.
I tried to remove element created by selectbox <span class="selectbox">...</span> before re-initializing, and its work.
$('#select').prev().remove();
$('#select').selectbox();
hope this helps.
Did you initialize it before the select boxes? It has to be initialized before them. And make sure jQuery is loaded before you do anything jQuery. (duh)
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.selectBox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").selectBox();
});
</script>
<select name="standard-dropdown">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3 has <a> really long label but it won't affect the control's display at all</option>
<option value="4">Item 4</option>
<option value="5" disabled="disabled">Item 5 (disabled)</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9">Item 9</option>
<option value="10">Item 10</option>
<option value="11">Item 11</option>
<option value="12">Item 12</option>
<option value="13">Item 13</option>
<option value="14">Item 14</option>
<option value="15" selected="selected">Item 15</option>
<option value="16">Item 16</option>
<option value="17">Item 17</option>
<option value="18">Item 18</option>
<option value="19">Item 19</option>
<option value="20">Item 20</option>
</select>
Hope this helps.
P.S Maybe you could show us full code, or a link to where you're having the issue?

Categories

Resources