Wie kann ich ausblenden (und fadeIn) gewählten wählen?

Ich bin mit der Ausgewählten Bibliothek (http://harvesthq.github.com/chosen/) als JQuery-plugin zur Verbesserung der Elemente auswählen.
Ich muss zunächst verstecken (und dann fadeIn) wählen, aber der Weg unten scheint nicht zu funktionieren.

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

Ich habe Sie versucht, Ihren code in jquery-ready-callback-Funktion?
Ja, das wählen immer noch nicht verstecken.

InformationsquelleAutor Christian Beil | 2012-10-22

Setzen, wählen Sie die in span-und anzeigen/verstecken der 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>

Danke, gute Idee. 🙂 Hat nicht funktioniert .display = 'none', aber es funktionierte mit JQuery-hide: $('#spanForfirstChosenSelect').hide();
Sie sind herzlich willkommen.

InformationsquelleAutor Adil

Nur wickeln Sie Ihre Auswahl mit einem div:

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

Dann verstecken Sie es einmal gewählt wurde vollständig instanziiert (mit chosen:ready):

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

InformationsquelleAutor prograhammer

0

Zuerst verstecken Sie Ihre selectbox mit "display: none;" oder "visibility: hidden"
```
<select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px; display: none;" tabindex="2">
```
Verwenden Sie dann die ausgewählte() und fadeIn () - Funktionen auf die selectbox, wenn der Inhalt geladen wird. Ich würde das ondocument ready-Funktion von jQuery.
```
<script type="text/javascript">
  $(function(){ //run when content is loaded..
    $('#firstChosenSelect').chosen();
    $('#firstChosenSelect').fadeIn(400);
  });
</script>
```
Leider verblasst in ein auswählen, wird nicht Gewählt-Stil und zeigt den Gewählten Stil wählen Sie weiter, um es (ohne fadeIn).

InformationsquelleAutor feskr
0

Es gibt eine Menge von undokumentierten Optionen und Ereignisse für gewählt so muss man Lesen, die Quelle zu finden. In diesem Fall das problem ist, wir wissen nicht, Wann gewählt hat mit dem Bau fertig sind die gestalteten Felder auswählen, so brauchen wir Tippen in die benutzerdefinierte liszt:ready Ereignis und verwenden Sie einige css Deckkraft.

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

Binden wir eine Funktion ausgelöst werden, wenn das Ereignis Auftritt. Die Funktion animieren Sie die Deckkraft zu 1 über 1000 ms. Dann mit jquery Verkettung, rufen Sie einfach .chosen() auf das element sofort nach.
```
<script>
  $('#firstChosenSelect').bind('liszt:ready', function(){
    $('.chzn-container').animate({
      opacity:1
    }, 1000);
  }).chosen(); 
</script>
```
In jQuery v1.7+ hätten wir auch verwendet .on()

demo

InformationsquelleAutor Anthony Hatzopoulos
0

können Sie erkennen, dass Plug-in erstellen, die alle neben dem select-tag. So sollte reichen:
```
$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();
```
Bye;

InformationsquelleAutor Nan1488

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

css

javascript

demo