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在窗體中使用下拉菜單顯示/隱藏

回答

相關問題