Question

我拥有国家/地区的所有图片但是如何在视觉上添加图像之前的图像？基本上我希望国旗显示在每个选择上。感谢您的帮助，这是我的详细信息。

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

只需在每个选项的文字前添加img即可。像这样：

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

Answer 2

我认为您可以使用option和一些填充来设置background-image标记的样式。如果您这样解决，class属性可能会有所帮助

如何在此选择列表中添加图像？ JavaScript的？

2 个答案: