jQueryフォームでの表示/非表示のドロップダウン

Question

誰かがドロップダウンからオプションを選択したときに表示されるフィールドが異なるようにするフォームがあります。何らかの理由で私のコードがうまくいかず、オプションのdivが隠されていますが、私が選択すると表示されません。

jQuery(document).ready(function(){ 
    jQuery("#ltd").change(function(){ 

     if (jQuery(this).val() == "1") { 

      jQuery("#ltd").slideDown("fast"); //Slide Down Effect 

     } else { 

      jQuery("#ltd").slideUp("fast"); //Slide Up Effect 

     } 
    }); 

    jQuery("#partnership").change(function(){ 

     if (jQuery(this).val() == "1") { 

      jQuery("#partnership").slideDown("fast"); //Slide Down Effect 

     } else { 

      jQuery("#partnership").slideUp("fast"); //Slide Up Effect 

     } 
    }); 

    jQuery("#sole").change(function(){ 

     if (jQuery(this).val() == "1") { 

      jQuery("#sole").slideDown("fast"); //Slide Down Effect 

     } else { 

      jQuery("#sole").slideUp("fast"); //Slide Up Effect 

     } 
    }); 
}); 

私のCSSは次のとおりです：

.formhide { display:none; } 
.clear-block { clear:both; } 

ここで私はを使用しているjQueryの（私たちはMagentoの内競合別のスクリプトを実行しているように私はjQueryのために$をsubtitutedしました）

これは次の形式のコードです：

<div class="form-left-even"><span class="green">Company Type</span></div> 
<div class="form-right-even"> <select> 
<option value="">Please choose</option> 
<option value="ltd">Limited Company</option> 
<option value="partnership">Partnership</option> 
<option value="sole">Sole Trader</option></select> 
</div> 
<div class="clear-block"></div> 
<div class="formhide" id="ltd"> 
<!-- Limited Company --> 
<div class="form-left-even">Reg Comp Name:</div> 
<div class="form-right-even"> 
    <input type="text" name="regcompname" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div> 
<div class="form-left-even">Reg Number:</div> 
<div class="form-right-even"> 
    <input type="text" name="regnumber" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div> 
</div> 
<div class="formhide" id="partnership"> 
<!-- Partnership --> 
<div class="form-left-even">Partner 1 Name:</div> 
<div class="form-right-even"> 
    <input type="text" name="partner1" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div> 
<div class="form-left-even">Partner 2 Name:</div> 
<div class="form-right-even"> 
    <input type="text" name="partner2" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div> 
<div class="form-left-even">Partner 3 Name:</div> 
<div class="form-right-even"> 
    <input type="text" name="partner3" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div></div> 
<div class="formhide" id="sole"> 
<!-- Sole Trader --> 
<div class="form-left-even">Full Name:</div> 
<div class="form-right-even"> 
    <input type="text" name="soletradername" size="37" maxlength="100" /> 
</div> 
<div class="clear-block"></div></div> 

Answer 1

あなたはそうではありません変更の選択を見て - あなたはターゲット要素を見ている。

あなたが何かしたい：

HTML

<select id='pagePartSelector'> 
    <option value="part1">part1</option> 
    <option value="part2">part2</option> 
</select> 
<div id="part1" class="pagePart">...</div> 
<div id="part2" class="pagePart">...</div> 

スクリプト：

$('#pagePartSelector').change(
function() { 
    $(".pagePart:visible").slideUp(); //slide up visible pageparts 
    $("#"+$(this).val()).slideDown(); //slide down the selected page part by id 
}); 

Answer 2

私はコードを正しく理解していれば、あなたがに）（.changeを装着しているように、それはそうし'#ltd'など。.change（）イベントをドロップダウンリストにフックする必要があります。デビッドケップが言うように

Answer 3

、

jQuery("#ltd") 

あなたがリストをドロップダウンして、変更を監視するために、「ID」または「クラス」を提供する必要があります。