CODEWITHSUNDEEP
javascripthtmlcss
Giorgio
Giorgio

Reputation: 41

How do I add images in this select list? Javascript?

I have all the images of the countries but how would I add the image before the name of the language on visual? Basically I want the country flag to show up on each selection. Thanks for your help this is as much detailed I can be.

<body>

  <header>
    <div id="country-select">
      <form action="" method="get">
        <select id="locale" name="locale">
          <option value="none">Select A Language</option>
          <option value="en_US">English(US)</option>
          <option value="en_GB">English(UK)</option>
          <option value="bg_BG">Bulgarian</option>
          <option value="cs_CS">Czech</option>
          <option value="da_DK">Danish</option>
          <option value="de_DE">German</option>
          <option value="ek_GR">Greek</option>
          <option value="es_ES">Spanish</option>
          <option value="et_ET">Estonian</option>
          <option value="fi_FI">Finnish</option>
          <option value="fr_FR">French</option>
          <option value="hu_HU">Hungarian</option>
          <option value="it_IT">Italian</option>
          <option value="lt_LT">Lithuanian</option>
          <option value="lv_LV">Latvian</option>
          <option value="nl_NL">Dutch</option>
          <option value="no_NO">Norwegian</option>
          <option value="pl_PL">Polish</option>
          <option value="pt_PT">Portugese</option>
          <option value="ro_RO">Romanian</option>
          <option value="sk_SK">Slovak</option>
          <option value="sl_SL">Slovenian</option>
          <option value="sv_SE">Swedish</option>
        </select>
        <input value="Select" type="submit" />
      </form>
    </div>
  </header>
  <script>


      //Main Function: creates the page dynamically & switches the url to selected country
      function GetSelectedItem() {
        var option = document.getElementById("locale").value;
      }
	  
	  //Main Function: Split the string of the URL
	  function getParameterByName(name, url) {
		//Retrieves website URL
		if (!url) url = window.location.href;
		//Replaces the 1st parameter with the 2nd parameter
		name = name.replace(/[\[\]]/g, "\\$&");
		//Takes all the regular expressions and results is the value we need
		var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url);
		//If empty or none are in there return Null
		if (!results) return null;
		//If the URL name doesn't have anything in index 2 return empty stress
		if (!results[2]) return '';
		//Return the value without the regular expressions.
		return decodeURIComponent(results[2].replace(/\+/g, " "));
	  }
	  
	  //Set variable to the splitted string (e.g. en_GB would be the value inside of the getParameterByName()
	  var localeVariable = getParameterByName('locale');
	  //Make the drop down menu stay on the country selected
	  var temp = localeVariable;
	  //Determine with for loop to go through each country with the countring variable j
	  for(var i, j = 0; i = locale.options[j]; j++){
	  //if value matches go in the if to make the value the selected index
		if(i.value == temp){
			//set whatever j equaled to the selected index.
			locale.selectedIndex = j;
			break; //Break if value matches
		}
	  }
	  
  </script>
</body>

Upvotes: 0

Views: 73

Answers (2)

fedeghe
fedeghe

Reputation: 1318

I think You can style the option tags using the background-image and some padding. A class attribute could really help if You solve that way

Upvotes: 0

Andy Jenkins
Andy Jenkins

Reputation: 647

Just add an img before the text on each option. Like so:

<option value="en_GB" style="background-image:url(englishflag.jpg);">English(UK)</option>

Upvotes: 1

Related Questions