Comment puis-je cacher (et fadeIn) a choisi de sélectionner?

Je suis en utilisant le Choisi bibliothèque (http://harvesthq.github.com/chosen/) en tant que plugin JQuery pour améliorer sélectionner des éléments.
J'ai besoin de masquer (et puis fadeIn) la sélection, mais la façon ci-dessous ne semble pas fonctionner.

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

Ive vous essayé de mettre votre code en jquery prêts fonction de rappel?
Oui, le select ne peut toujours pas se cacher.

InformationsquelleAutor Christian Beil | 2012-10-22

Mettre le sélectionner dans la durée et de masquer/afficher la durée de

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

En javascript

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

En jQuery

<scirpt type="text/javascript>    
     $('spanForfirstChosenSelect').hide();
</script>

Merci, bonne idée. 🙂 Ne fonctionne pas avec .display = 'none', mais il a travaillé avec JQuery cacher: $('#spanForfirstChosenSelect').hide();

InformationsquelleAutor Adil

Juste envelopper de votre select avec un div:

<div id="wrapper"><select id="firstChosenSelect">...</select></div>

Puis cacher une fois choisi a été entièrement instancié (à l'aide de chosen:ready):

$('#firstChosenSelect').chosen();
$('#firstChosenSelect').on("chosen:ready", function(){
      $('#wrapper').hide();
});

InformationsquelleAutor prograhammer

0

Masquer votre selectbox avec "display: none;" ou "visibility: hidden"
```
<select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px; display: none;" tabindex="2">
```
Puis utilisez l'choisie() et fadeIn() des fonctions sur la selectbox lorsque le contenu est chargé. Je voudrais utiliser le ondocument prêt de la fonction de jQuery.
```
<script type="text/javascript">
  $(function(){ //run when content is loaded..
    $('#firstChosenSelect').chosen();
    $('#firstChosenSelect').fadeIn(400);
  });
</script>
```
- Malheureusement, cela s'estompe dans une sélection qui n'est pas Choisi de style et montre un choix de style, sélectionnez suivant pour elle (sans fadeIn).
InformationsquelleAutor feskr
0

Il y a beaucoup de sans-papiers, des options et des événements pour choisi donc il faut lire les sources pour les trouver. Dans ce cas, le problème est que nous ne savons pas quand choisi a fini de construire le style des listes de sélection, donc nous avons besoin de puiser dans la coutume liszt:ready événement et d'utiliser un peu de css opacité.

css
```
<style>
    #firstChosenSelect,  /* the un-styled select box */
    .chzn-container      /* the styled chosen container that gets created later */
    {
      opacity:0
    }
</style>
```
javascript

Nous lier une fonction pour être déclenché lorsque l'événement se produit. La fonction va animer l'opacité à 1 plus de 1000 ms. Ensuite, à l'aide de jquery chaînage, il suffit d'appeler .chosen() sur l'élément immédiatement après.
```
<script>
  $('#firstChosenSelect').bind('liszt:ready', function(){
    $('.chzn-container').animate({
      opacity:1
    }, 1000);
  }).chosen(); 
</script>
```
En jQuery v1.7+ nous aurions pu également utilisé .on()

démo

InformationsquelleAutor Anthony Hatzopoulos
0

vous pouvez vous rendre compte que choisi plugin créer tous à côté de la balise select. Donc, avec cela devrait être suffisant:
```
$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();
```
Bye;

InformationsquelleAutor Nan1488

Vous devez vous connecter pour publier un commentaire.

css

javascript

démo