Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responding to Onclick in a <select> HTML Element

I have created a select element drop down list in HTML. The select tag has three options. An "onclick" JS event is attached to the select tag. In JavaScript, I have a matching function that alerts the user if and only if the first option has been selected. Here is a JSFiddle with my code.

https://jsfiddle.net/TempusF/rad11vgx/12/

The problem I am having is that, on Firefox for mac, this alert will only be displayed if you first select a different option. That is to say, if the page loads and "Zone 1" is displayed, clicking Zone 1 a second time will not trigger the alert. You must click to Zone 2 or Zone 3, and then click back to Zone 1 to get the alert.

However, on Firefox for Windows, any click on the Zone 1 option will display the alert.

This leads me to believe that I am incorrectly using the onclick event when a different event is more idiomatic. Perhaps the expectation is that I have a button below the select element that triggers the alert function, thus deferring execution. However, I would like to create an interface that reacts immediately when a select option has been chosen.

Here is the HTML:

<select id="zoneSelect" onclick="updateChar();">
  <option value="zone1">Zone 1</option>
  <option value="zone2">Zone 2</option>
  <option value="zone3">Zone 3</option>
</select>

Here is the ecmascript.

function updateChar() {

    var zone = document.getElementById("zoneSelect");

    if (zone.value == "zone1"){

        alert("You clicked Zone 1.");
    }
}
like image 393
TempusFuu Avatar asked Apr 15 '17 00:04

TempusFuu


People also ask

Can we use Onclick in select tag?

Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags.

Can any HTML element have onclick?

The onclick attribute is part of the Event Attributes, and can be used on any HTML elements.

How do you put onclick in HTML?

The onclick attribute is an event attribute that is supported by all browsers. It appears when the user clicks on a button element. If you want to make a button onclick, you need to add the onclick event attribute to the <button> element.

Can I use HTML tags in the options for select elements?

No, you can't do this. <option> tags cannot contain any other tags. In Chrome at least, <option> tags can contain <script> tags. They will behave like normal <script> tags, meaning they will not be visible, but they will execute.


1 Answers

You shouldn’t use onclick in modern html, but you might try the following:

onchange="updateChar();"

Better still, you should set the event handler in the startup code. In any case, it’s still the change event.

Also, I recommend that a drop-down menu begin with a harmless null value, so that you don’t default to the first value — unless, of course, that is the intention:

 <option value="">Choose one …</option>

Edit

Apropos by comment that you shouldn’t use inline event handlers in modern JavaScript, here is how you would do it today:

In HTML:

<select id="zoneSelect">
    <!-- options-->
</select>

In JavaScript:

document.addEventListener("DOMContentLoaded",init);

function init() {
    document.querySelector('select#zoneSelect').addEventListener('click')=updateChar;
}

Better still, if the select element is part of a form, then it should have a name attribute, and you wouldn’t need an id attribute. In JavaScript, you can refer to it as:

document.querySelector('select[name="…"]')

and ditto for any CSS you might apply.

like image 148
Manngo Avatar answered Oct 04 '22 02:10

Manngo