Danjojo wrote:
I have some basic markup:
<img id="countryFlag" src="images/us.gif">
<select style="width: 100px;" onchange="javascript: alert('hello
world!');">
<option value="0">Language</option>
<option value="1">English</option>
<option value="2">Japanese</option>
</select>
I have done some basic Jquery that changes or alters basic classes,
Id's, or element attributes.
But I am not sure how to use Jquery in a function manner yet.
How do I get the src for the flag image to change, id countryFlag,
when Japanese is selected?
I suggest to let the image file names and option values match. Then you
could try the following:
$(function() {
$('#languages').bind('change', function() {
var country = $(this).val();
if (country) {
$('#countryFlag').attr('src', country + '.gif');
}
});
});
<select id="languages">
<option value="">Language</option>
<option value="us">English</option>
...
</select>
That's all. You should be aware that in IE and Opera, when using the
keyboard to navigate through the select, the change event is fired
everytime it the next item gets selected (as opposed to other browsers
where it is required to hit enter first). That may be not critical here,
but it is for example if you use a select as navigation.
To go a little further: To me the flag is purely presentational, as the
selected language is clearly indicated by the selected item. Thus I'd
use classes for displaying the flag and use CSS to display the flag...
--Klaus
