How To Open/Show A Select Element Using jQuery

The default select elements looks ugly and if you want to create beautiful sites, its better to not use select element. But what if you really want to use select element ? The only way to accomplish this is to create a dynamic select box which functions just like the HTML select element. In this post I’m going to show you the way to create a fake select box that will open when clicked and when the user selects an option, the select box will automatically close.

Here is our HTML code :

<button id="clickme">Click Me To Open Select Box</button>
<select id="choose" name="choose" style=display:none;"">
  <option value="burger">Burger</option>
  <option value="fries">French Fries</option>
  <option value="banana">Banana</option>
</select>

This is the jQuery code that will open the #choose select box when clicked on #clickme and will close if the user chooses an option :

$("#clickme").on("click",function(){
  var se=$("#choose");
  se.show();
  se[0].size=2;
});
$("#choose").on("click",function(){
  var se=$(this);
  se.hide();
});

This trick is used on Open in the post form** **: http://open.subinsb.com