How to close combobox when onmouseout?
<select onmouseout="">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
You can't do this (reliably). The popup that appears is not available to manipulate, ie open or close, programmatically and its behaviour is defined by the browser (or operating system).
To expand on this further, both IE and Firefox can close the popup by blurring the select element:
selectEl.blur();
Although, the mouseout event fires even when you move the mouse to the options in the popup, so it would require a bit of hackery magic. In Chrome it will blur the select element but the box will remain open.
It's generally best to leave the behaviour of UI components alone, so that users get the experience they expect through interaction with your website.
You can do a little trick like this...
<select onmouseover="size = 5" onmouseout="size = 0">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will expand the menu on mouse over then collapse it when you move out.
Edit: This can cause issues with placement of other elements if you're not careful.
A couple of years late but in case someone else is looking at this...I was able to toggle the open/close state of a select element in Chrome by sending it a mouse click. In this example moving the mouse over the toggle button will toggle the state of the <select>. This is a toggle, not an explicit open or close, but worked for me.
<script type="text/javascript">
function clickSelect(element) {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true);
element.dispatchEvent(event);
};
function toggleSelect() {
clickSelect(document.getElementById("select"));
}
</script>
<form>
<select id="select">
<option>one</option>
<option>two</option>
</select>
<input type="button" onmouseover="toggleSelect();" value="toggle select state" />
</form>
Related
I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
I am learning jQuery and in a project I fell into a problem. What I want is, there is a select box, which have some values. When my page loads, I want that if this select box has a certain value selected, its immediate div will appear automatically, otherwise, that div will be hidden.
My problem, here no event is occurring, it all will happen right after the page loads.
I did the same kind of work in another page, but there the div appears when I "select" a certain value. But, here I want this to happen when the page loads.
So what I tried :
html code :
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
This is my jQuery code :
<script>
$(document).ready(function(){
if($('.selector').val()=="volvo")
$(this).next('.show').show();
});
</script>
So, what I want is, if the .selector has the value "volvo", its next div(which has the class "show") will show up, otherwise not. Here, I am not using any change event. I want this happen after the page has been loaded.
I tried this too :
if($('.selector').val()=="volvo")
$(this).next().show();
But same result, nothing happens, the doesn't show up.
What should I do now ?
N.B.: Please notice that there are multiple <select> elements.
You are using this in document-ready handler, where it referees to document. You should bind change event with select and trigger it on page load.
Use
$(document).ready(function() {
//Bind change event
$('.selector').change(function() {
if ($(this).val() == "volvo") {
$(this).next('.show').show();
}
}).change(); //Trigger on page load
});
When you are using that in document.ready this doesn't refer to select.
You should say
$('.selector').next('.show').show();
DEMO
Here is solution. Hope its work for you :-
<select class="selector">
<option value="select">select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
Jquery code
$(document).ready(function(){
$(".selector").on("change", function(){
$val = $(this).val()
// alert($val);
if($val == "volvo"){
$(".show").show();
}else{
$(".show").hide();
}
})
});
Checkout below link
JSFiddle
I have a multiselect on a page, and I have set it up so that when one of the options is clicked another select on the page is disabled. The issue I am having is the client wants to have the other select disabled even if the user just clicks on the scrollbar of the multiselect. I have the onclick event on the select tag. Is there away to trigger the script if the user clicks on the scrollbar of the multiselect?
<select name="disable_this" id="disable_this" data-dojo-type="dijit.form.FilteringSelect" data-dojo-props="maxHeight:300" style="width:500px; overflow:hidden;" onclick="javascript:disableOtherSelect('thisone_multiple','disable_this');">
<option selected="selected">Select</option>
<option>first</option>
<option>second</option>
<option>third</option>
</select>
<select name="thisone_multiple" id="thisone_multiple" data-dojo-type="dijit.form.MultiSelect" multiple="multiple" data-dojo-props="maxHeight:300" style="width:500px; overflow:hidden;" onclick="javascript:disableOtherSelect('disable_this','thisone_multiple');">
<option selected="selected">Select</option>
<option>C - Example Account Name 1</option>
<option>A - Example Account Name 2</option>
<option>B - Example Account Name 3</option>
<option>ZZ - Example Account Name 4</option>
<option>AA - Example Account Name 5</option>
</select>
function disableOtherSelect(layer,layer2){
//disable the other one based on arguments from the onchange event
dijit.byId(layer2).set('disabled', false);
dijit.byId(layer).set('disabled', true);
};
UPDATE
I have created a simple jsfiddle that shows an onclick on a select versus a multiselect. As you will see, clicking the scrollbar on the multiselect does not trigger the script, but clicking the arrow on the select does trigger script:
http://jsfiddle.net/txujL/2/
I found a better way to do this. Rather than disabling the form inputs, I set them up so that when one is clicked on a semi-transparent div appears over the other, effectively preventing the user from making a selection in the "disabled" one.
This is my example.
<select name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
<option value="val5">val5</option>
<option value="val6">val6</option>
</select>
as you can see, we have a select box with different options.
What i want to do is to hide option with val2 and val5, but add another option to the end of the list like <option value="more">more</option>.
By clicking "more" the hidden options should be shown. the option "more" should be replaced by an option "less". By clicking less the options should be hidden again.
Please keep in mind that this is only an example. The full list contains more than 50 options. Would it be useful to some kind of array?
Unfortunately I have no idea how to start.
Any help on this would be greatly appreciated. Thanks.
UPDATE
Please have a look at my comments in the js-Part http://jsfiddle.net/bqyBQ/5/
I would try something like this
<select id="mydropdownbox" name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4" class="hide">val4</option>
<option value="val5" class="hide">val5</option>
<option value="val6" class="hide">val6</option>
<option value="more" class="more">more</option>
</select>
<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
jQuery('#mydropdownbox .more').click(function() {
jQuery('#mydropdownbox .hide').attr('class', 'show');
});
</script>
Just put a new class to these elements, which should be hidden per default. Then add a click event to the more link to toggle these classes. It would be easy to make a less button with this technique too.
Make a link in the "more" option. on click of more option should call javascript or jquery and add the data dynamically from the script and toggle the caption of more and less as well as add and remove operation
For example, if I have this HTML for a drop down menu:
<div data-role="fieldcontain">
<label for="cars" class="ui-hidden-accessible">Select Seating Area</label>
<select id="cars" data-native-menu="false">
<option class="myclass1" value="volvo">Volvo</option>
<option class="myclass2" value="saab">Saab</option>
<option class="myclass3" value="mercedes">Mercedes</option>
<option class="myclass4" value="audi">Audi</option>
</select>
</div>
I want my custom classes to be added to the corresponding LI elements of the resulting UL element. How would one go about doing it? Does jQuery Mobile provide this functionality out of the box?
Here's a quick JSFiddle: http://jsfiddle.net/avQC6/1/
No this functionality is not provided out of the box. The way to do this would be something like the following:
$('[data-option-index=0]').addClass('myclass1');
$('[data-option-index=2]').addClass('myclass2');
I'm sure you could write a neater way to accomplish this. That is just the general idea.
The approach I ended up taking was the following:
Disable JQM select menu handling by adding "data-role='none'" attribute to the menu
Manually call .selectmenu() on the drop down list with a call back for "create" event
See this jsfiddle for an example