jQueryでの選択に基づいてラベルを更新します

Question

私はドロップダウンセレクタとフォームフィールドを以下のように持っています。選択したオプションに基づいて、フォームラベルと対応するフォームフィールドを表示できるようにする必要があります。

これを実装する最も良い方法は何ですか：可能なラベルとフィールドとフォーム要素を準備し、隠しdivに格納してから選択に基づいて表示/非表示をしますか？

<script type="text/javascript"> 
$(function() { 
    $('#mySelector').change(function(){    
     $('.opt').hide(); 
     $('#' + $(this).val()).toggle(); 
    }); 
}); 
</script> 

<select id="mySelector"> 
    <option value="o1">Car details 
    <option value="o2">Boat details 
    <option value="o3">Train details 
</select> 

<div id="o1" class="opt"> 
    <label for="f1_1">Car speed</label> 
    <input id="f1_1" type="text"> 
    <br> 
    <label for="f1_2">Car color</label> 
    <input id="f1_2" type="text"> 
</div> 

<div id="o2" class="opt"> 
    <label for="f2_1">Boat size</label> 
    <input id="f2_1" type="text"> 
    <br> 
    <label for="f2_2">Boat weight</label> 
    <input id="f2_2" type="text"> 
</div> 

<div id="o3" class="opt"> 
    <label for="f3_1">Train length</label> 
    <input id="f3_1" type="text"> 
    <br> 
    <label for="f3_2">Train cargo</label> 
    <input id="f3_2" type="text"> 
</div> 

私はjQueryの行くための最善の方法であると仮定し...

はまた、私は一度各オプションについて、この3回が表示されます。上記で選択したオプションと同じオプションを選択しないようにするには、何らかの仕組みが必要です。出来ますか？

Answer 1

これらの要素の「重み」が軽い場合は、それらをページに配置し、どの要素が表示されているかを動的に切り替えることは悪い考えではありません。それ以外の場合は、おそらくajax経由でコンテンツを取得する必要があります。

$('#o1').show() // This will display the 'o1' div 
$('#o1').hide() // This will hide the 'o1' div 

おそらくクラスを（おそらくそれぞれのdivに「情報」が追加されます）。あなたが最初にあなたは、AJAXを使用する必要がある場合、あなたはおそらく、プレースホルダのdivが必要になります要素と

$('.info').hide() // this will hide all the elements. 

を非表示にする

.info {display: none; } 

を使用することができますこの方法...

<div id='placeholder'></div> 

と使用

$('#placeholder').load(url) 

to dynamic lyはhtmlを取得します。

希望すると、これが始まります。

ボブ