I tried the example. In IE7, when I change the Select List to
Japanese, the flag in the ID above does not change.
If I select English first, then select Japanese the flag will change.
What am I missing?
I have for JQuery:
$(function() {
$("#languages").bind('change', function() {
var country = $(this).val();
if(country) {
$('#countryFlag').attr("src", "images/" + country +
".gif");
}
});
});
And for markup:
<img id="countryFlag" src="images/us.gif">
<select id="languages" style="width: 100px;">
<option value="">Language</option>
<option value="us">English</option>
<option value="jp">Japanese</option>
</select>
On Jul 20, 2:43 pm, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> 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- Hide quoted text -
>
> - Show quoted text -
