The onclick event does not work for options

Question

Following is my code which works fine in firefox but not in chrome. Kindly let me know how to solve this issue. The main idea is to call a js function based on the selected value of select box:

<select onselect="question_type(this.value);" name="qtype" id="qtype" class="form-control input-lg" required>
    <option value="">-- Select question type for this quiz --</option>
    <option onclick="question_type(this.value);" value="mcq">1) MCQs</option>
    <option onclick="question_type(this.value);" value="tf">2) True/False</option>
</select>

Answer 1

I've made an interesting discovery, that has a material impact on this question. NOTE: this occurs on Chrome Version 63.0.3239.108 (Official Build) (64-bit), running on Windows 7. What I report here may differ on Chrome running on other platforms, but it is worth investigating anyway, in case the same solution works on other platforms.

I wrote some code, to create pop up dialogues, allowing me to select various options. The code allows the dialogues to appear one on top of the other in sequence, and be dismissed in reverse order. This code was then coupled to two dialogues, both containing select controls.

I then wrote a function, to populate those select controls with option elements, which attached click event listeners to the options. The function was duly called to attach data to the options being appended to the relevant select controls.

Dialogue #1 was then launched. The select control was manipulated, and the click event duly fired on the options I selected, all easily observable courtesy of [1] tracing through the Crome debugger, and [2] the effect the event listener code had on other DOM elements in the dialogue.

Dialogue #2 was then launched, and overlaid over Dialogue #1.

The select control was then manipulated, and ... no click events were fired.

What was the difference?

The difference, was that the select control on Dialogue #1, had a size attribute set (in particular, size="5"). The select control on Dialogue #2, did not have a size attribute set.

The moment I set the size attribute on the select control on Dialogue #2, click events were properly fired once more.

If you want click events to work with options in a select control on Chrome, you must set a size attribute on the select control, viz:

<select id="MySelector" size="6"></select>

If you omit this attribute from your select control, click events will be ignored.

It now remains to be determined, if one has to set the size attribute directly in the HTML file before running the JavaScript code, or whether setting a size attribute in JavaScript before attaching options will also work. Let me get back on this one while I test it.

EDIT: I've just tested to see if adding a size attribute to the select control in JavaScript, instead of in the HTML file, works as a means of enabling proper handling of click events on option elements in Chrome (version details the same as before), and this also works. So, code such as:

sel = document.getElementById("PickSecondaryClue");
sel.setAttribute("size","5");

will also work.

Apparently, there are special caveats applicable to the size attribute in Chrome to take account of - certain values are documented, at least in some versions, as exhibiting unexpected side effects.

Now it remains to see if this works in Firefox too.

EDIT 2: Also works in Firefox. (57.0.2 64-bit)

Answer 2

Now I see many people asking why not the change event, well because I dont want to have to do it like this

<select id="custList" class="_List" size="15" runat="server">
            <option disabled="disabled">choose your stuff</option>
            <options......
</select>

Nor would I like to do this either

<select id="custList" class="_List" size="15" runat="server">
            <option selected="selected">choose your stuff</option>
            <options......
 </select>

Sure there is a lot of fancy css stuff you can do together with js to overcome the situation but that means more code and more events and more that can go wrong...

As a user if the option I want is the very first, why would I first have to click on the next one just so I can select the first one! my first intuition is click on the first one! but that does not select the option and it doesn't fire the event :(

So thats a good reason why we want the click event apposed to the change event which we will also use. (Like a belt and suspenders...)

Now I have also read a lot of answers/posts with "You cant, use change" but actually that's not completely true, you can get click events to fire on a select option, however the only way I have gotten it to work is if you define a size > 1 which makes it more a list than a drop-down and maybe that is why it works...

However if you are trying to do it in the following ways it wont work!

$("#select option").on('click',function(){}); //won't work!
$(".option-class").on('click',function(){}); //won't work!
<option ... onclick="myFunc()" value="blah">blah</option> //won't work!

Answer 3

options don't fire mouse events in chrome.

For a select element you'd use the onchange event on the select itself, and the value of the select will always be the same as the selected option

<select onchange="question_type(this.value);" name="qtype" id="qtype" class="form-control input-lg" required>
    <option value="">-- Select question type for this quiz --</option>
    <option value="mcq">1) MCQs</option>
    <option value="tf">2) True/False</option>
</select>

with jQuery it would be

$('select').on('change', function() {
    var selected = this.value;
});

Answer 4

$(document).ready(function(){
    $("#qtype").change(function(){
        $(this).find('option:selected')
        // do something....
    }
})

Answer 5

A different approach would be add an event listener to the and not the options.

var e = document.getElementById("qtype");
var selectedSelect= e.options[e.selectedIndex].value;

the above code will find the select element and call it e. Then find the value selected and call it selectedSelect. Then you can simply pass this value into the question_type() function.