jQuery下拉隐藏显示div基于值

这是一个经典问题，但无法找到最佳方法。 我有一个id为project_billing_code_id的下拉列表和3个值（1,2,3）。

如果选择的值= 1，则显示id为1且仅为此的div。 div二和三必须隐藏。 我还希望在加载视图时实现这一点，而不仅仅是在更改时。

$(document).ready(function() { $("#hourly").hide(); $("#per_diem").hide(); $("#fixed").hide(); $("#project_billing_code_id").change(function() { if ($("#project_billing_code_id").val() == '1') { $("#hourly").show(); } else if ($("#project_billing_code_id").val() == '2') { $("#per_diem").show(); } else if ($("#project_billing_code_id").val() == '3') { $("#fixed").show(); } else { $("#hourly").hide(); $("#per_diem").hide(); $("#fixed").hide(); } }); }); 

Answer 1

你很亲密 您可能需要对行为进行一些小的调整，以确保所有div都隐藏，并且在页面加载时显示正确的div。

在这里玩一下代码： http ： //jsfiddle.net/irama/ZFzrA/2/

或者在这里获取更新的JS代码：

 hideAllDivs = function () { $("#hourly, #per_diem, #fixed").hide(); }; handleNewSelection = function () { hideAllDivs(); switch ($(this).val()) { case '1': $("#hourly").show(); break; case '2': $("#per_diem").show(); break; case '3': $("#fixed").show(); break; } }; $(document).ready(function() { $("#project_billing_code_id").change(handleNewSelection); // Run the event handler once now to ensure everything is as it should be handleNewSelection.apply($("#project_billing_code_id")); }); 

让我们知道你怎么走！

Answer 2

不要使用hide from document.ready，因为它必须等待dom加载。 添加内联样式=“display：none;”

删除if语句中的$（“＃project_billing_code_id”）赋值，并使用它，因为您已经可以通过事件处理程序访问dom元素，使用$（this）.val（）或this.val（）。 还可以重复使用代码，以便可以从不同的脚本调用它。

 var PayRate = (function(){ var _obj = {}; var hideShow = function(elem){ if($(elem).val() === '1'){ $("#hourly").show(); }else if($(elem).val() === '2'){ $("#per_diem").show(); }else if($(elem).val() === '3'){ $("#fixed").show(); }else{ $("#hourly, #fixed, #per_diem").hide(); } }; _obj.checkValue = function(){ hideShow($('#project_billing_code_id')) }; var events = function(){ $('#project_billing_code_id').change(function(){ hideShow(this); }); }; $(document).ready(function(){ events (); checkValue (); }); return _obj; }()); 

我没有对上述内容进行测试，因此您可能需要进行一些更改。 我想你明白了。 🙂

Answer 3

工作小提琴

这就是我让它为我工作的方式。

JS

 $(document).ready(function (e) { $('#reasonDropDown').change(function () { if ($(this).val() == 'other') { $('.otherReasonTextBox').show(); } else { $('.otherReasonTextBox').hide(); } }); }); 

CSS

  .otherReasonTextBox { display:none; } 

HTML

  Select One Select Two Select Three Other  
Other Reason Textbox 

Answer 4

使用jquery隐藏和显示div标签

 $(document).ready(function() { setOptions(); // on load $('#Drodown_id').change(setOptions); // on change function setOptions() { switch ($("#Drodown_id").val()) { case "option_1" : $("#div1").show(); $('#div2').hide(); break; case "option_2": $("#div1").hide(); $("#div2").show(); break; case "option_3": $("#div1").show(); $("#div2").show(); break; case "": $("#div1").hide(); $("#div2").hide(); break; } }); });