2012-01-05 8 views
1

更新:すべてのdivを1つのテーブルデータセルの下に置きます。これで、選択オプションを変更するときに必要な機能が得られましたが、ページが読み込まれたときにのすべてがと表示されます。 {html_options name="program" options=$programs selected=$sanction->Program}divを使用してdivを変更する

$ sanction-> Program pieceは、どのプログラムが事前選択されるかの文字列を取り込みます。最初に設定されたオプションで実際のオプションを選択しますが、値は対応していません。それは divごとにと表示されます。

前へ: 1つのdivを表示しながらjqueryでdivを非表示にしようとしています。私が6つから1つのオプションを選択すると、divが表示されますが、選択したものが互いに重なり合っている間に明確に伝えることができます。私は自分の選択をしてそのdivを表示するだけで、他のdivを非表示にしたいだけです。どんな助けもありがとう。ここで

は私のコードは、あなたがこの場合、同じIDを持つ複数のTD

<td id="levelCheck"> 

持っ

// jQueryの

 $("select[name=program]").change(function() { 
      $("td#levelCheck div").hide(); 
      $("td#levelCheck div#" + $(this).val()).show(); 
     }); 

// HTML

<table class="form" style="margin-top: 20px;"> 
      <tbody> 
       <tr> 
        <th>Sanction Name</th> 
        <td><input type="text" name="name" size="40" maxlength="100" value="{$sanction->Name}" /></td> 
       </tr> 
       <tr> 
        <th style="vertical-align: top;">Select discipline type</th> 
        <td>{html_options name="program" options=$programs selected=$sanction->Program}</td> 
       </tr> 
       <tr id="trCheck"> 
        <th></th> 
        <td id="levelCheck"> 
         <div id="Rhythmic" style="width: 452px;"> 
          {foreach from=$acroLevels item=level} 
           <label> 
            <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description} 
           </label> 
          {/foreach} 
         </div> 
         <div id="Acro" style="width: 452px;"> 
          {foreach from=$acroLevels item=level} 
           <label> 
            <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description} 
           </label> 
          {/foreach} 
         </div> 
         <div id="Men" style="width: 452px;"> 
          {foreach from=$mensLevels item=level} 
           <label> 
            <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description} 
           </label> 
          {/foreach} 
         </div> 
         <div id="TT" style="width: 452px;"> 
          {foreach from=$ttLevels item=level} 
           <label> 
            <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description} 
           </label> 
          {/foreach} 
         </div> 
         <div id="Women" style="width: 452px;"> 
          {foreach from=$womensLevels item=level} 
           <label> 
            <input type="checkbox" name="{$level->Code}" value="{$level->Description}" /> {$level->Description} 
           </label> 
          {/foreach} 
         </div> 
         <div id="Group" style="display: none;"> 
        </td> 
       </tr> 
+0

あなたはどのようにして彼らが互いの上にいるのかを明確に伝えることができますか?ユーザーは何を経験したり、あなたが望んでいないことを見ますか?実際の例がなければ、最初の検査では「見える」。 –

+0

セレクタでIDを使用している場合は、他の情報を指定する必要はありません。それはすでに文書で一意でなければなりません。 – Andrew

+0

ドロップダウンセレクタには、オプションに関連付けられたdivを表示するマイコンの値があらかじめ入力されています。問題は、1つの選択肢が強調表示されている間、他のすべてのdivが表示されないようにすることです。基本的には、選択肢から多くのスペースが取られます。私はちょうど1つのdivの限られた量のスペースがほしいです。 – wowzuzz

答えて

0

ですjQueryがセレクタを適用する#levelCheckを使用して、最初に一致した要素のみを使用します。あなたは、クラスに代わり

<td class="levelCheck"> 

を使用して、離れて醜いテーブル

$("td.levelCheck div") 
0

スローを使用するように変更する必要があります。すべてのdivのプレーンを互いの後に置き、表示をnoneに設定するだけです。 表示したいものを表示するには、表示をブロックに設定し、その他の設定はすべて無効にします。 それだけです。

関連する問題