jQuery 使用下拉菜单显示/隐藏表单答案

【问题标题】：jQuery show/hide in form using dropdownjQuery 使用下拉菜单显示/隐藏表单
【发布时间】：2010-11-18 13:39:08
【问题描述】：

我有一个表单，当有人从下拉列表中选择一个选项时，我希望显示不同的字段。由于某种原因，我的代码无法正常工作，它隐藏了可选的 div，但是当我进行选择时它没有显示它们。

这是我正在使用的 jQuery（我已经用 $ 代替了 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>

【问题讨论】：

我承认自己是一个纯粹主义者和一个书呆子，但是当 Magento 已经提供了 Prototype 和 Scriptaculous 库时，为什么还要添加 jQuery 库并在其中编写呢？

标签： jquery forms magento

【解决方案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
});

【讨论】：

【解决方案2】：

如果我正确理解代码，您似乎将 .change() 附加到“#ltd”等。您需要将 .change() 事件连接到下拉列表。

【讨论】：

【解决方案3】：

正如大卫凯普所说，

jQuery("#ltd")

您需要向下拉列表提供“Id”或“class”，然后注意更改。

【讨论】：