Giorgio Giorgio - 5 months ago 9
CSS Question

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>




Answer

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>
Comments