Ahh the code works fine.
The problem seems to be that when shift-refreshing the browser, the
selected item in the select list does not reset to the selected
option.
<select id="languages" style="width: 100px;">
<option value="trans" selected="selected">Language</option>
<option value="us">English</option>
<option value="jp">Japanese</option>
</select>
Even setting it to selected does not help. If I last chose English,
then when I shift refresh the browser English is still selected. :(
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 -
