jQuery jQuery下拉根据值隐藏显示div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7019096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery dropdown hide show div based on value
提问by Gaelle
this is a classic question but can't find the best approach. I have a dropdown with id project_billing_code_id and 3 values (1, 2, 3).
这是一个经典问题，但找不到最佳方法。我有一个带有 id project_billing_code_id 和 3 个值（1、2、3）的下拉列表。
If value selected = 1 then show div with id one and only this one. div two and three must be hidden. I also want to make this happen when view is loaded so not only on change.
如果选择的值 = 1，则显示 ID 为 1 且仅此一个的 div。div 2 和 3 必须隐藏。我也想在加载视图时实现这一点，所以不仅仅是在更改时。
$(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();
}
});
});
回答by irama
You were close. You probably want a few small tweaks to the behaviours to make sure all the divs hide and that correct div is showing on page load.
你很接近。您可能需要对行为进行一些小的调整，以确保隐藏所有 div 并且在页面加载时显示正确的 div。
Have a play with the code here: http://jsfiddle.net/irama/ZFzrA/2/
在这里玩一下代码：http: //jsfiddle.net/irama/ZFzrA/2/
Or grab the updated JS code here:
或者在这里获取更新的 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"));
});
Let us know how you go!
让我们知道您的进展情况！
回答by DanyZift
dont use hide from document.ready as it has to wait for the dom to load. Add an inline style="display:none;"
不要使用从 document.ready 隐藏，因为它必须等待 dom 加载。添加内联样式="display:none;"
drop the $("#project_billing_code_id") assignments inside your if statement and use this instead as you already have access to the dom element via the event handler, use $(this).val() or this.val(). Also make your code reusable so you can call it from different scripts.
将 $("#project_billing_code_id") 赋值放在 if 语句中并使用它，因为您已经可以通过事件处理程序访问 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;
}());
I have not tested the above so you might need to make a few changes. I think you get the idea though. :)
我没有测试上述内容，因此您可能需要进行一些更改。我想你明白了。:)
回答by Aamir Shahzad
This is how i made this worked for me.
这就是我如何使它对我有用。
JS
JS
$(document).ready(function (e) {
$('#reasonDropDown').change(function () {
if ($(this).val() == 'other') {
$('.otherReasonTextBox').show();
} else {
$('.otherReasonTextBox').hide();
}
});
});
CSS
CSS
.otherReasonTextBox {
display:none;
}
HTML
HTML
<select id="reasonDropDown" name="Select">
<option>Select One</option>
<option>Select Two</option>
<option>Select Three</option>
<option value="other" id="other">Other</option>
</select>
<div class="otherReasonTextBox">Other Reason Textbox</div>
回答by Mohit Kotak
Hide and show div tag using jquery
使用 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;
}
});
});
