Dropdown-box Setup

this question is related to my previous post about changing the URL of an href-tag when clicking on some switch. Link I now have set up something different since I couldn't get any

Solution 1:

Please add code given below in your jquery script code before current = lang;

/*Replace language flag src , alt and title*/
   $('#language-selection > #current-language > img').attr('src' , $(this).find('img').attr("src"));

   $('#language-selection > #current-language > img').attr('alt' , lang);
   $('#language-selection > #current-language > img').attr('title' , lang);

   /*check for all content in div having id current-language and check if nodeType == 3 mean string text then replace old text with new one */  
   $("#language-selection > #current-language").contents().each(function() {
         if(this.nodeType == 3)
             this.nodeValue = this.nodeValue.replace(current, lang);
     });

Please check link Jsfiddle Link.

thanks

Solution 2:

Hi I changed your code a little bit in order to work. You need to change both language text and language image on select click.

HTML part :

<divid="language-selection"><divid="current-language"><spanclass="element-invisible">Current language:</span><imgclass="language-icon"src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png"alt="English"title="English" /><spanclass="text">English</span></div><divclass="element-invisible">Switch to:</div><ulid="other-languages"><liclass="zh-hans first"><ahref="javascript:;"data-lang="Chinese"class="clickButton"><imgclass="language-icon"src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_China.png"alt="简体中文"title="简体中文" /> 简体中文</a></li><liclass="en"><ahref="javascript:;"data-lang="English"class="clickButton"><imgclass="language-icon"src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png"alt="English"title="English" />English</a></li><liclass="de last"><ahref="javascript:;"data-lang="German"class="clickButton"><imgclass="language-icon"src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_Germany.png"alt="German"title="German" /> German</a></li></ul></div>   
...

JS in this part :

 ...
 var current = "English"
$("[data-lang]").on("click", function() {
    var lang = $(this).data("lang");

$(".clickButton").prop("href", function(i, href) {
        return href.replace(current, lang);
    });

    $("#current-language img").attr("src", $(this).children("img").attr("src")); // NEW 

    $("#current-language .text").text(lang); // NEW

    current = lang;
});