onClick won't fire up functions

Question

I've written a dropdown menu that I want functions to fire when an option is clicked. It hasn't been working on any browser so I replaced the first function with a simple alert but that's not firing either. Any pointers would be appreciated!

<select name="webmenu" id="webmenu">
<option value="UK" id="UK_button" title="assets/images/uk_flag.png" onclick="alert('You are clicking on me');">&nbsp;</option>
<option value="US" id="US_button" title="assets/images/us_flag.png" onclick="finalResultsUS()">&nbsp;</option>
<option value="EU" id="EU_button" title="assets/images/euro_flag.png" onclick="finalResultsEuro()">&nbsp;</option>
</select>

I've made a few changes to the code based on replies so far (thanks guys)

<select name="webmenu" id="webmenu">
<option value="UK" id="UK_button" title="assets/images/uk_flag.png" onchange="alert('You are clicking on me');">&nbsp;</option>
<option value="US" id="US_button" title="assets/images/us_flag.png" onchange="finalResultsUS()">&nbsp;</option>
<option value="EU" id="EU_button" title="assets/images/euro_flag.png" onclick="finalResultsEuro()">&nbsp;</option>
</select>

<script>
document.getElementById("webmenu").onchange = function() {alert('you clicked me');
}
</script>

but I need a to be able to fire off a different function for each specific choice rather than one function for any change in selection. How could I do this without jquery please?

I could use:

document.getElementById("webmenu").onchange = function() {
alert(this.value)
return false
};

but how would I write it so that clicking on the US option (2nd option) would trigger the US function for example rather than just firing off alerts please?

score 1 · Answer 1 · answered Oct 07 '14 at 06:45

1

You can not handle onclick on option You need to handle on select-> onchange. Basic on Id call that functions

answered Oct 07 '14 at 06:45

Amit

15,217
8
46
68

@WhiteLine `Jquery` is not mentioned in tag – Amit Oct 07 '14 at 06:47
Thanks Amit, I've changed the onclick to onchange but this is having no effect. Does the onchange work on dropdowns if the user is not supplying any data or is the act of selecting doing the data change? – user2840467 Oct 07 '14 at 06:56

score 0 · Answer 2 · answered Oct 07 '14 at 06:51

0

This simplified version of your code seems to work:

<select name="webmenu" id="webmenu">
<option value="UK" id="UK_button" onclick="alert('You are clicking on me');">UK-clickme</option>
</select>

http://jsfiddle.net/0o1syz29/

What browser / version are you using?

answered Oct 07 '14 at 06:51

Steffan Mejia

48
3

Hi Steffan, I'm using Chrome. I've tried your fiddle on IE and Chrome - works fine in IE but not Chrome. I'm having a feeling that there's going to be some cross browser problems with this... – user2840467 Oct 07 '14 at 06:59

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

I don't think click event is valid on 'option'

all you can do is with change

$('#webmenu').change(function(){

var temp=$(this).children(":selected").val();
switch(temp)
{
    case 'UK':
        alert('Hello UK');
        break;
    case "EU":
        alert("HEllo EU");
        break;
}

});

Working Fiddle

See also

edited May 23 '17 at 12:20

Community

1
1

answered Oct 07 '14 at 07:10

Shekhar Pankaj

9,065
3
28
46

Could you show me how this could be achieved without jquery please? – user2840467 Oct 07 '14 at 07:41

score 0 · Answer 4 · answered Oct 07 '14 at 09:49

Here is a solution with just javascript. You can change the code in each function to remove the alerts and replace with your working code.

Here is a working jsFiddle

<select name="webmenu" id="webmenu" onChange='changedFunction(this.value);'>
    <option value="UK" id="UK_button" title="assets/images/uk_flag.png">&nbsp;</option>
    <option value="US" id="US_button" title="assets/images/us_flag.png">&nbsp;</option>
    <option value="EU" id="EU_button" title="assets/images/euro_flag.png">&nbsp;</option>
</select>

changedFunction= function (val) {
    //console.log(val);
    switch (val) {
        case 'US':
            finalResultsUS();
            break;
        case 'UK':
            finalResultsUK();
            break;
        case 'EU':
            finalResultsEuro();
            break;
    }
};

finalResultsUS = function() {
    alert('You clicked on US');
};
finalResultsUK = function() {
    alert('You clicked on UK');
};
finalResultsEuro = function() {
    alert('You clicked on EU');
};

onClick won't fire up functions

4 Answers4