jQuery in Formular anzeigen/ausblenden mit Dropdown

Question

Ich habe ein Formular, dass verschiedene Felder angezeigt werden sollen, wenn jemand eine Option aus einem Dropdown auswählt. Aus irgendeinem Grund funktioniert mein Code nicht, es ist die optionalen divs versteckt, aber es wird nicht angezeigt, wenn ich meine Auswahl treffen.

Hier ist die jQuery Ich verwende (Ich habe $ für jQuery subtituted wie wir ein anderes Skript ausgeführt werden, die innerhalb von Magento in Konflikt):

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 

     } 
    }); 
}); 

Meine CSS ist:

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

Und das ist der Code in der Form:

<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

Du bist nicht Beobachten Sie die Auswahl für Änderungen - Sie sehen sich die Zielelemente an.

Sie wollen so etwas wie:

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> 

Script:

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

Answer 2

Wenn ich den Code richtig verstehe, scheint es, wie Sie die .change werden Befestigung(), um die '#ltd' usw. Sie müssen Ihr .change() - Ereignis mit der Dropdown-Liste verknüpfen.

Answer 3

Als David Kep sagt

jQuery("#ltd") 

Sie müssen „Id“ oder „Klasse“ zur Verfügung zu stellen Listen Dropdown und dann für die Veränderungen zu beobachten.