这是一个经典问题,但找不到最好的方法.我有一个带有project_billing_code_id和3个值(1,2,3)的下拉列表.
如果选择值= 1,则显示id为id且只有这一个. 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();
}
});
});
解决方法
你很近您可能需要对行为进行一些小的调整,以确保所有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"));
});
让我们知道你怎么走！