Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I hide (and fadeIn) a chosen select?

I'm using the Chosen library (http://harvesthq.github.com/chosen/) as JQuery plugin to enhance select elements. I need to initially hide (and then fadeIn) the select, but the way below doesn't seem to work.

<!doctype html> 
<html lang="en"> 
<head>
   <link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>
   <select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px;" tabindex="2">
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="United Kingdom">United Kingdom</option> 
      <option value="Afghanistan">Afghanistan</option>
   </select>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
     $('#firstChosenSelect').chosen();
     $('#firstChosenSelect').hide();
   </script>
</body></html>
like image 471
Christian Beil Avatar asked Oct 22 '12 14:10

Christian Beil


1 Answers

Put the select in span and hide/show the span

In html

<span id="spanForfirstChosenSelect" >
  <select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px;" tabindex="2">
      <option value=""></option> 
      <option value="United States">United States</option> 
      <option value="United Kingdom">United Kingdom</option> 
      <option value="Afghanistan">Afghanistan</option>
  </select>
</span>

In javascript

<scirpt type="text/javascript>    
     document.getElementById('spanForfirstChosenSelect').display = 'none';
</script>

In jQuery

<scirpt type="text/javascript>    
     $('spanForfirstChosenSelect').hide();
</script>
like image 82
Adil Avatar answered Sep 20 '22 19:09

Adil