Develop Reference

Click event on select with single option (Firefox) doen't work

I made a search tag interface, so I need to put my found tags like option in select. Then I wait user click (bubble up) on option and add this tag to groups of tags which will send to server. Why doesn't it work in FF? I know workaround solution to use the mousedown event instead of the click event, but I want to understand the logic, maybe it's a bug and I need to report it to the FF developers. By the way, everything works well when I add a few options, I think it is somehow related to the fact that by default 1 option is always select = true.
Codepen sandbox
document.querySelector("#b").addEventListener("click", function() {
console.log(1);
});
<select name="a" id="b">
<option value="one">one</option>
</select>

Use JQuery to select a dropdown option and fire the OnChange function

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');

Applying form validation of select menu similar to html5 required attribute of <input>

I'm trying to make everything in my form required, including the select menus. w3schools says that no major browsers support the required attribute on <select> tags..
http://www.w3schools.com/tags/att_select_required.asp
Is there really no way to provide client side validation on select menus the same way as input text fields? I have a working plunkr here, where if you click check with everything blank, the warning appears under the the first input, even though there is a select menu above it.
if it were working the "this field is required" message would appear under the select menu since it is the first invalid form item. Additionally if you fill out all input fields no message appears anywhere. The code is in angular and spans 5 files, so view it on the plunkr .
If you know any way to apply the same validation to select menus, or have confirmation this is impossible, I'd greatly appreciate it.

W3schools is incorrect as usual. Useful references like MDN on select tell that required is supported by modern versions of all major browsers; the main problem with support is lack of support in IE 9 and older.
However, you need to note the definition of the attribute: it means that the control satisfies the constraint if and only if its value is nonempty. Since the first option is selected by default (unless you make another option initially selected using the selected attribute), you need to make its value empty. Example:
:invalid { outline: solid red }
<form>
<select name=fruit required>
<option value="">Please select a fruit
<option>apple
<option>orange
</select>
<input type=submit value=Submit>
</form>
If you need to cover IE 9 and older, too, just add simple JavaScript code that checks that value property of the select element is not empty when the form is to be submitted (or whenever you are checking the form data in the browser).

The built-in HTML 5 alerts aren't coming up because technically you already have an option selected. Angular's select directive creates and defaults to a blank option if the ng-model attribute in the element doesn't refer to a specific options value.
Inspect your select element and you'll see
<option value="?" selected="selected"></option>
You could have your ng-model attribute refer to a valid options value and then hide the automatically generated blank value option, but then, you would always have a value pre-selected and your animation effects for select elements would be lost. See example here.
Your only other option is to create your own validation and have a div underneath each select element that either shows or hides based on if a valid value is selected.

jQuery rating plugin that works with select options

I have tried the rateit plugin but this does not seem to work correctly with the <option selected="selected">
UPDATE:
Updated the JSfiddle to the latest jquery and now I have the issue back where it is only displaying 4 stars when I have 5 options in the select?
I have been looking for a couple of hours now to find a rating plugin which:
Doesn't require extra HTML.
Displays the option text on hover of each each using the title attribute.
Only works with full star rating.
HTML
<select class="test" id="rating1" name="Rating">
<option value="1">Poor</option>
<option value="2">Fair</option>
<option value="3" selected="selected">Good</option>
<option value="4">Very Good</option>
<option value="5">Excellent</option>
</select>

You need to make the selectbox update the rating value. Add:
$('#rating1').change(function() {
$('div#rating2').rateit('value',$(this).val());
});
See example.
Edit:
RateIt requires jQuery 1.6.0+, which is why updating the jQuery version causes the selectbox to (properly) disappear. Have a look at this fiddle to see if it meets your needs. This will "progressively enhance" the selectbox so that users without JavaScript enabled will still be able to use the select, and those with JS enabled will get the nicer version.
If you want the backing field to be shown, you have to toggle it after the rateit() call. Also, to prevent the "reset" option from showing up, you need to set another data attribute and extend the select a bit:
Example.

Your jQuery version is old, you need 1.6 or newer.

Dropdown selector to change color of DIV using JS and CSS

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.