Question

MVC的新手，并试图从C＃重写旧的应用程序。在下拉列表中的50个州中，只有2个具有单独的div，所有其他都是“默认”。 $（文件）。就绪（）; { $（“＃State”）。change（function（）{

        var dropdownval = $("#State").val();
        switch (dropdownval) {
            case 'NH':
                $("#NH").show();
                break;
            case 'WA':
                $("#WA").show();
                break;
            default:
                $("#Default").show();
                break;
        }
    }
    )
};

DropDownListFor

<div class="form-group; flex-container">
@Html.LabelFor(model => model.State, new { @class = "control-label col-md-2" })
<div class="control-label col-md-2">
    @Html.DropDownListFor(x => x.State, (IEnumerable<SelectListItem>)ViewData["StateList"], "Select State")
</div>

基于所选状态显示/隐藏的分区：

        <div id="WA" class="StateSelect" hidden="hidden" style='font-size: 10pt;'>
    <label class="control-label">Washington</label>

<div id="NH" class="StateSelect" hidden="hidden" style='font-size: 10pt;'>
    <label class="control-label">New Hampshire</label>

<div id="Default" class="StateSelect" hidden="hidden" style='font-size: 10pt;'>
    <label class="control-label">Default</label>

Answer 1

你需要在准备好的内部绑定jquery，你在外面做它。

$(document).ready(function(){
    $(".StateSelect").change(function () {

    var dropdownval = $("#StateSelect").val();
    switch (dropdownval) {
        case 'NH':
           $("#NH").show();
           $("#WA").hide();
           $("#Default").hide();
            break;
        case 'WA':
          $("#WA").show();
           $("#Default").hide();
           $("#NH").hide();
            break;
        default:
           $("#Default").show();
           $("#WA").hide();
           $("#NH").hide();
            break;
        }
    }
    );
});

注意我在ready（...）

中添加了一个函数

您可以在此处找到有关如何初始化文档的更多信息

https://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

您需要将代码更改为此类

     $(document).ready(); {
    $(".StateSelect").change(function () {

        var dropdownval = $("#StateSelect").val();
        switch (dropdownval) {
            case 'NH':
               $("#NH").show()
                break;
            case 'WA':
              $("#WA").show()
                break;
            default:
               $("#Default").show()

                break;
        }
    }
    )
};

Answer 3

您应该使用on('change', function(){。其次，您可以通过隐藏所有元素并根据选择显示所需的元素来压缩此代码，如下所示：

$(".StateSelect").on('change', function() {
  $("#Default, #NH, #WA").hide();
  var dropdownval = $("#StateSelect").val();
  switch (dropdownval) {
    case 'NH':
    case 'WA':
      $("#" + dropdownval).show();
      break;
    default:
      $("#Default").show();
      break;
  }
});

在MVC中使用dropdownlistFor显示/隐藏带有switch case的div

3 个答案: