In Firefox, there seems to be some weird issues around when the selectedIndex of a select field changes. It seems to change on hover, rather than on click.
Using:
setInterval(function(){console.log($('select').prop('selectedIndex'));}, 1000);
I can see the selectedIndex change as I hover over different items (the items getting a blue background and white text as I hover over them).
In Chrome, the selectedIndex only changes when an option is clicked.
I can't think of a way to work around this - I've tried to capture clicks on the options and check those against a data attribute on the select as per this SO question but the click handler only seems to work sporadically.
So when i try this on my page:
$('select[name=sel1]').change(function(){
alert(this.value);
});
With this select:
<select name="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Than in firefox it only alerts when i select the option...
Greetings
Related
Using Chrome, on a page with a Select element, when the Select element is clicked and the options are displayed, hover effects from other elements on the page don't work.
Using FireFox, the tooltip does display, but UNDER the select dropdown options.
What I'm trying to accomplish is when a user clicks the select element and the options are displayed, I have an anchor tag that when hovered over - displays a tooltip with instructions for each of the options in the select element.
An example of how the page is setup:
<a>Hover over me</a>
<select name="choices" id="choices-select">
<option value="a">Choice A</option>
<option value="b">Choice B</option>
<option value="c">Choice C</option>
</select>
Is there any way to allow hover events to take place elsewhere on the page, when the select element is clicked?
I was expecting that even though the select element options were visible, that I would still be able to hover over the anchor tag to see the tooltip.
I have a page that loads with a dropdown in it with a select dropdown list with an id = "accounts". When the page loads it is already on the Account Orange page. I would like to use JQuery to find the select id element and then force it click on the 3 option which should be index 2.
<select id="accounts" onChange="changeAccount(this.form,this[this.selectedIndex].value)">
<OPTION value="">Select One...</OPTION>
<OPTION value="111">Account Red</OPTION>
<OPTION value="222">Account Yellow</OPTION>
<OPTION value="333">Account Blue</OPTION>
<OPTION value="444" selected>Account Orange</OPTION>
</select>
Something like this works:
jQuery('#accounts>option:eq(2)').prop('selected', true);
Currently when the page loads it does select the correct option despite the "selected" tag but it does not fire it to the OnChange function to select "Account Yellow" and then it would reload the page. That's what I would like it to do.
First, it's better to set the value of the SELECT by value instead of index. Because you might want to add extra OPTION's later (in your source code or dynamically) and then your index count is off.
Second, I find it better practice to change the value of the SELECT, instead of changing HTML attributes/properties which make it selected (e.g. not setting/changing the selected property of the OPTION, but changing the value of the SELECT). Otherwise, you might end up with more than one selected OPTION's which might work, but is not very clean coding.
Third, the suggested >option:eq(2) selector might not work if you're using OPTGROUP's, because then the OPTION is not a direct descendant of SELECT.
So, my suggestion is to use:
jQuery('#accounts').val('222').change();
It selects the right SELECT field, then sets the value to 333 and then fires the onchange event (you need to do that manually in this case).
$('#accounts>option:eq(2)').prop('selected', true).promise().then(function(){
changeAccount(this.form,this[this.selectedIndex].value)
});
Try the following:
jQuery('#accounts>option:eq(2)').prop('selected', true).closest('select').trigger('change');
I know this may be kind of a simple question, but cant seem to find an answer anywhere, I have a form in my site, with multiple form elements like combobox, text, radio buttons, checks etc, My requirement is to change the values of those form elements when a user from dropdown combobox is selected, I have successfully implemented that functionality with all the form elements except for the comboboxes, I cant seem to find any way to change the options of the combobox...
Since you included the jQuery tag,
select.val(value);
where select is the jQuery select element and value is the value.
JSFiddle
<select>
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
<script>
$('select').val('2');
</script>
New option can be added to the combobox as below
$('< option value=’Value’ > Sample Value < /option >').appendTo('#ComboId');
a dropdown value can be selected by
$('#ComboId').val('Value');
What I need is a simple color picker (max 6-8 color) so the user can choose a color for an event that will be entered in a calendar.
I have tested several jQuery colopicker plugins and none have worked well in my project.
Either they are too complex (like Farbtastic) or are simple but don't run on the most recent version of jQuery.
So I decided to provide a good ol' dropdown menu with a list of colors
<select id="evt_color">
<option value="#3366CC">Blue</option>
<option value="#E070D6">Fuchsia</option>
<option value="#808080">Gray</option>
<option value="#4bb64f">Green</option>
<option value="#ed9d2b">Orange</option>
<option value="#FF9CB3">Pink</option>
<option value="#EA4A4A">Red</option>
</select>
This works well. But I would like to give the user some feedback on the color they choose, before submitting the form.
I wonder if somehow we could create a small square DIV next to the dropdown, and have its background-color change to the value of the selected color onChange, via something like getElementById or other method. By default, the first color would be selected (Blue).
Anyone have suggestions for this? jQuery or raw JS suggestions are welcome!
Thanks for helping!
$(document).ready(function() {
$("#evt_color").change(function() {
$("#someDiv").css("background-color", $(this).val());
}).change(); // trigger change event so div starts out with a colour
// on page load
});
You can try it here.
I have an HTML select list which, when an item is selected, must show different information beneath it. The onclick or JQuery change events are triggered when a select list item is selected by being clicked on (mouse), but not when the user uses key presses (keyboard).
Any idea what event to watch in order to determine when the selected list item has changed?
Here is a BASIC test example:
<select id="mylist" name="mylist">
<option value="">(none)</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<span id="myspan"></span>
<script type="text/javascript">
$("#mylist").change(function() {
$("#myspan").html($("#mylist").attr("selectedIndex"));
});
</script>
The code will run when the select box loses focus
(press tab or click anywhere outside of the select box)
The OnChange event is different from browser to browser when an item is changed with keyboard shortcuts.
For example, in IE, the event is fired the same way with the keyboard and the mouse, but in Firefox, to trigger the event with the keyboard, you need to press enter when the item selected is the good one. The event is also fired when the <select> loose focus (OnBlur - and only if OnChange has not already been fired) as Gaby pointed out.
It the way it's made...
It works if you change add attribute:
multiple="multiple"
if you want the dropbox, I'd bind a 'global' keyup event handler to the document.body
and do some magic there.