Develop Reference

Use different library instead of jQuery Mobile for <select>

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

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.

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);
}
});​

Problem with onMouseOut event with select box options (IE)

The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing great) and option disappear. How can one get over this bug?
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';">
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>

I changed the code do it conditionally. Now it is working fine. Check it.
<select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;"
OnMouseOver="this.style.width='auto';" onmouseout="if(!this.focussed) {this.style.width='200px';}" onfocus="this.focussed=true;" onblur="this.style.width='200px';this.focussed=false;" >
<option value="1" selected="selected">click here</option>
<option value="1">Samuel Jackson</option>
<option value="2">David Nalog</option>
<option value="3">This one is a real real big name</option>
</select>

How to hide optgroup/option elements?

Is there a way to hide option or optgroup HTML elements? I've tried calling hide() in jQuery, and also using regular Javascript to set style.display='none'.
It works in Firefox but not in any other browsers. Actually removing them from the DOM does work, so perhaps there's a way to save each DOM element when it's removed, and reinsert them in the same place?
My HTML is like this:
<select name="propsearch[area]" id="propsearch_area">
<option value="0">- Any -</option>
<optgroup label="Bristol">
<option value="Hotwells">Hotwells</option>
<option value="Montpelier">Montpelier</option>
</optgroup>
<optgroup label="Cardiff">
<option value="Heath">Heath</option>
<option value="Roath">Roath</option>
</optgroup>
<optgroup label="Exeter">
<option value="Pennsylvania Road">Pennsylvania Road</option>
<option value="Lower North Street">Lower North Street</option>
</optgroup>
<optgroup label="Swansea">
<option value="Brynmill">Brynmill</option>
<option value="Uplands">Uplands</option>
</optgroup>
</select>

I figured that this solution works fine for me:
Make another select e.g.
$("#footer_canvas").after('<select id="parkingLot"></select>');
then hide it
$("#parkingLot").hide();
When you want to 'hide' some optgroup, just 'park' it in this hidden select.
$('#VehicleVehicleCategoryId optgroup[label="kategorie L"]').appendTo("#parkingLot");
Same way you can make it visible.
This is just the snippets of my solution, that works fine for me.