5

選択要素を強化するための JQuery プラグインとして Chosen ライブラリ (http://harvesthq.github.com/chosen/) を使用しています。最初に選択を非表示にする（そしてフェードインする）必要がありますが、以下の方法ではうまくいかないようです。

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

5 に答える 5

8

選択をスパンに入れて、スパンを非表示/表示します

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>

JavaScriptで

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

jQueryで

<scirpt type="text/javascript>    
     $('spanForfirstChosenSelect').hide();
</script>
于 2012-10-22T14:41:03.677 に答える
0

まず、「display：none;」で選択ボックスを非表示にします。または「可視性：非表示」

<select id="firstChosenSelect" data-placeholder="Choose a Country..." style="width:350px; display: none;" tabindex="2">

次に、コンテンツが読み込まれるときに、選択ボックスでchosen（）関数とfadeIn（）関数を使用します。jQueryのondocumentready関数を使用します。

<script type="text/javascript">
  $(function(){ //run when content is loaded..
    $('#firstChosenSelect').chosen();
    $('#firstChosenSelect').fadeIn(400);
  });
</script>
于 2012-10-22T14:47:08.640 に答える
0

選択したプラグインが select タグの横にすべて作成されていることがわかります。したがって、これで十分なはずです：

$('#firstChosenSelect').next().hide();
$('#firstChosenSelect').next().fadeIn();

さよなら;

于 2013-03-27T15:34:53.117 に答える
0

selected には文書化されていないオプションやイベントがたくさんあるため、ソースを読んで見つける必要があります。この場合の問題は、selected がスタイル付き選択ボックスの構築をいつ終了したかがわからないため、カスタムliszt:readyイベントを利用して css opacity を使用する必要があることです。

CSS

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

JavaScript

イベントが発生したときに起動される関数をバインドします。この関数は、不透明度を 1000 ミリ秒で 1 にアニメートします。次に、jquery チェーンを使用.chosen()して、直後の要素を呼び出すだけです。

<script>
  $('#firstChosenSelect').bind('liszt:ready', function(){
    $('.chzn-container').animate({
      opacity:1
    }, 1000);
  }).chosen(); 
</script>

jQuery v1.7+ では、使用することもできました.on()

デモ

于 2013-03-20T15:57:41.633 に答える