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

Question

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>

See this answer: http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — Magnus Buvarp, Jun 27 '16 at 14:08

Andy Jenkins · Accepted Answer · 2016-06-27T14:18:11.650

1

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>

edited Jun 27 '16 at 14:18

answered Jun 27 '16 at 14:07

Andy Jenkins

617
8
26

That only works in Firefox! I need it to support all browsers, especially Google Chrome. Thanks for your help though – Giorgio Jun 27 '16 at 14:22
1

Yeah, cross-browser will be difficult using this method, however it is the only way to do it. Otherwise you could use something else other than the standard `select` – Andy Jenkins Jun 27 '16 at 14:24
Okay yeah I guess I'm going to have to use a JQuery Library – Giorgio Jun 27 '16 at 14:29
1

Yeah have a look at this! http://jqueryui.com/selectmenu/#custom_render – Andy Jenkins Jun 27 '16 at 14:30
I just took a look at that, It would be nice to see some code on that drop down menu. Do you see any code or file included with that? – Giorgio Jun 27 '16 at 14:30
Yep if you click view source you will see it – Andy Jenkins Jun 27 '16 at 14:31

fedeghe · Answer 2 · 2016-06-27T14:18:20.653

0

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

edited Jun 27 '16 at 14:18

answered Jun 27 '16 at 14:08

fedeghe

1,243
13
22

Thanks I'll try that out! – Giorgio Jun 27 '16 at 14:12
I just googled your method, you sure it works on all browser and not just Firefox? – Giorgio Jun 27 '16 at 14:19
1

u're right... [here](http://jsfiddle.net/GHzfD/357/) a jQuery plugin rebuilds it with `ul` & `li` – fedeghe Jun 27 '16 at 14:33

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

2 Answers2