jQuery在窗体中使用下拉菜单显示/隐藏

我有一个表单，当有人从下拉菜单中选择一个选项时，我希望显示不同的字段。出于某种原因，我的代码无法正常工作，它隐藏了可选的div，但是在我做出选择时它不会显示它们。jQuery在窗体中使用下拉菜单显示/隐藏

下面是我使用了jQuery（我subtituted jQuery的$，因为我们正在运行另一个脚本内Magento的冲突）：

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; }

这是代码形式：

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

来源

2010-11-18 Vince Pettit

我自由地承认自己是一个纯粹主义者和迂腐者，但为什么当Magento已经提供Prototype和Scriptaculous库时，为什么要添加jQuery库并写入它？ – clockworkgeek 2010-11-18 14:23:51

你不是看着选择变化 - 你正在看目标元素。

你想要的东西，如：

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 
});

来源

2010-11-18 13:41:48

如果我理解正确的代码，好像你正在连接的.change（）到'#ltd'等。您需要将.change（）事件连接到下拉列表。

来源

2010-11-18 13:46:40 Skadoosh

正如David白马说，

jQuery("#ltd")

，你将需要提供“身份证”或“阶层”下拉列表，然后查看更改。

来源

2010-11-18 13:49:06 msuhash

jQuery在窗体中使用下拉菜单显示/隐藏

回答

相关问题