jQuery下拉菜单隐藏显示基于值的div

Question

这是一个经典问题，但找不到最好的方法。我有一个包含 id project_billing_code_id 和 3 个值(1、2、3)的下拉列表。

如果选择的值 = 1，则显示 id 为 1 的 div，且仅显示该 div。 div 2 和 div 3 必须隐藏。 我还希望在加载 View 时实现此目的，而不仅仅是在更改时实现。

$(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"));

});

让我们知道你进展如何!