CODEWITHSUNDEEP
javascripthtml
user2840467
user2840467

Reputation: 893

onClick won't fire up functions

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?

Upvotes: 0

Views: 183

Answers (4)

talves
talves

Reputation: 14353

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');
};

Upvotes: 0

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9145

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

Upvotes: 0

Steffan Mejia
Steffan Mejia

Reputation: 48

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?

Upvotes: 0

Amit
Amit

Reputation: 15387

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

Upvotes: 1

Related Questions