Question

172

Responding to Onclick in a < select> HTML Element

rated 0 times [ 174] [ 2] / answers: 1 / hits: 32512 / 7 Years ago, sat, april 15, 2017, 12:00:00

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

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maxd

Add To Favorites

Follow

Total Points: 568

Total Questions: 100

Total Answers: 101

Location: Serbia

Member since Tue, Jul 26, 2022

2 Years ago

answered 7 Years ago mitchell · Accepted Answer

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.