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>

Angular ng-click for drodpdown option tag

Here is a jsfiddle. http://jsfiddle.net/cuycbxxp/
I have a dropdown selection here for 2. names and numbers.
Select name and then select numbers. once a dropdown is selected for numbers, execute function get executed and a output is displayed at the console.
This might look like it is working fine. but open the console and click on the dropdown. execute function executes before we even select a dropdown option.
How to ensure that execute function should execute only when the user clicks on one of the option tags ?
Markup:
<div ng-controller="MyCtrl">
<div>
<label>Names:</label>
<select ng-model="params.name">
<option value="pa">Taeo</option>
<option value="ws">Wers</option>
<option value="pn">Petin</option>
</select>
<br>
<label>Numbers:</label>
<select ng-click="execute()">
<option value="22">22</option>
<option value="33">33</option>
</select>
</div>
</div>

ng-click will trigger when you click any element with that decorator, not the option. I think ng-change will probably be a better directive in your case.

Change <select ng-click="execute()"> to <select ng-change="execute()">
The ng-click gets executed whenever you click on the object (in this case, the dropdown). The ng-change gets executed when the form element is changed, which is whenever the user changes the dropdown item.

You need to use angular ng-change (ngChange).
Use
ng-change="execute()"
instead of
ng-click="execute()"
Doc Reference ng-change: https://docs.angularjs.org/api/ng/directive/ngChange
Doc Reference ng-click: https://docs.angularjs.org/api/ngTouch/directive/ngClick
Since you use ng-click, the click event fires at the time you click the select box. However if you use ng-change, the change event will fire when the select box's value change based on the option selection, thus execute() will fire.

javascript drowdown list

I have a drop down list on my form.
What is the event I would use in javascript that triggers once the user has made a selection on a drop down. I tried on change but that did on work.
DROP DOWN

onchange is the correct event.
HTML
<select onchange="SelectChanged(this)">
...
</select>
JS
function SelectChanged(obj) {
...
}
Here's a very simple working example to get you going.

jQuery: How to cancel blur event if the element that will receive focus is a particular type?

I'm writing a custom form UI and currently building a select box replacement. The custom select control is basically a div with a hidden (off screen) select input in it, along with a span containing anchor elements mirroring the options of the select input:
<span class="input select">
<span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>
<span id="select-select1-options" class="select-options">
<a value="1" href="#"><span>This is the first option</span></a>
<a value="2" href="#"><span>This is the second option</span></a>
<a value="3" href="#"><span>This is the third option</span></a>
</span>
<select name="select1" id="select1" tabindex="2">
<option value="1">This is the first option</option>
<option value="2">This is the second option</option>
<option selected="selected" value="3">This is the third option</option>
</select>
</span>
When the user tabs to the field or clicks it, they actually give focus to the hidden select; the parent span then gets highlighted (with the addition of a CSS class) so that they can see which field has focus.
$('.input select').bind('focus', function() {
$(this).closest('.input').addClass('focused');
}).bind('blur', function(e) {
$(this).closest('.input').removeClass('focused');
});
However, here's what's happening:
User clicks the custom select. The span is highlighted to show it has focus, and the option anchors appear.
User clicks an option, and the option anchors are hidden again. But because the clicked option is an anchor, it then receives focus and the main select highlight disappears, when it should stay (because we still want the select to have focus).
So what I'm trying to achieve is that when one of the anchors in the custom select control is clicked, it doesn't fire the blur event on the hidden select input.
What's the best way to do this?
P.S. Sorry if this is a little confusing, it's quite difficult to explain clearly!

I'm actually building a custom selectbox replacement as well as I find all the current solutions to be lacking. You can try e.preventDefault() to see if that cancels the blur event, but my preferred method is to just give focus back to the select if an anchor is clicked, with $(this).closest('input').focus();
Also, is there a reason you are giving focus to the hidden select? You can allow your span to capture focus (and respond to tabbing) by setting its tabindex:
$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");
And then prevent the hidden input from capturing focus by hiding it fully:
$('.input select').hide();

Selecting an item in an HTML SELECT list using keyboard doesnt trigger the CLICK event

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.