Hide text from a select

Asked

Viewed 99 times

1

I have a select with a small image and a text in each option. I want to hide the text when I open select and when I select the option Selected. Something like this:

document.getElementById('select_lng').onchange = function() {
    window.location = "page.htm?lng="+this.value;

    document.getElementById('fr').style.visibility = 'hidden';
};

   <select name=lng id=select_lng>\n"
     <option id=fr title=FR  value=fr style=\"background-image:url(/logos/fr.png) >FR</option>
     <option id=en title=EN value=en style=\"background-image:url(/logos/en.png) >EN</option>"
  </select>
javascript

  • Would that be? http://www.marghoobsuleman.com/countries-dropdown-flags

  • 1

    @akm you could explain better your question?

  • For example change the opacity to stay only the text in the transparent option

  • This might help: http://answall.com/a/13191/14262

1 answer

0

"I want to hide the text when I open select"

Why no longer leave it by default "hidden"? with this css it is possible to make it invisible to the eyes because the text would be the same color as the background:

select option { color: #fff }

"When selected, the option Selected(selected)"

Automatically, when you select it, it gets the blue background, then the white text on the blue background will appear, so you wouldn’t need any kind of code to do it.

Example:

select {
    height: 50px;
    width: 150px;
}
select option {
    color: #fff;
}
   <select name=lng id=select_lng>\n"
     <option id=fr title=FR  value=fr style="background:url(http://gartic.com.br/imgs/mural/ma/maquitinho/bandeira-da-franca.png) no-repeat transparent scroll center center / contain" >FR</option>
       <option id=en title=EN  value=en style="background:url(http://www.webbusca.com.br/atlas/bandeiras/eua.gif) no-repeat transparent scroll center center / contain" >EN</option>
  </select>

Remarks

I set the selected height and width only for better viewing, and also, I changed the image link to images on the web so that better viewing was possible, and I also added modifiers to the attribute background like the contain and the scroll center center to center the image and restrict the image to the option size, too, for better viewing.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.