MVC 上的Onchange

Question

我有这个 DDL：

<div class="editor-field">           
      @Html.DropDownList("Type", ViewBag.Type as SelectList, "-- Select --")
      @Html.ValidationMessageFor(model => model.Type)
</div>

基于此 DDL 中的选定项，我想隐藏另一个 DDL，在换句话说，第二个 DDL 仅在特定选项时才会显示检查第一个 DDL。

第二个 DDL：

<div id="divSimilar" class="editor-field" style="display:none">
     @Html.LabelFor(model => model.SimilarId)            
     @Html.DropDownList("Similar", ViewBag.SimilarId as SelectList, "-- Select --")
     @Html.ValidationMessageFor(model => model.SimilarId)
</div>

查看：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
var similar = $('#divSimilar');
$('#Type').change(function () {
    var selection = $(this).val();
    if (selection == "Eletronic") {
        similar.show();
    } else {
        similar.hide();
    }
});
</script>

当我更改 DDL 的索引（值）时，没有任何反应，我该怎么办？

编辑

只是为了在浏览器中显示...

<div class="editor-label">
     <label for="Type">Type</label>
</div>
<div class="editor-field">                
    <select data-val="true" data-val-regex="The field Type is not in the correct format." data-val-regex-pattern="^([a-zA-Z\u00c0-\u01ff]([\s]?))+$" data-val-required="The Type field is required." id="Type" name="Type">
       <option value="">-- Select --</option>
       <option value="Eletronic">Eletronic</option>
       <option value="Portable">Portable</option>
    </select>                
    <span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true">
    </span>
 </div>

<div id="divSimilar" class="editor-field" style="display:none">
     <label for="SimilarId">Similar</label>
     <select data-val="true" data-val-number="The field Similar must be a number." id="SimilarId" name="SimilarId">
       <option value="">-- Select --</option>
       <option value="1">Headphone</option>
     </select>
     <span class="field-validation-valid" data-valmsg-for="SimilarId" data-valmsg-replace="true">
     </span>
</div>

<script type="text/javascript">
    var similar = $('#divSimilar');
    $('#Type').change(function () {
        var selection = $(this).val();
        if (selection == "Eletronic") {
            similar.show();
        } else {
            similar.hide();
        }
    });
</script>

Answer 1

删除 onchange 属性并使用 unobtrusive javascript（停止用行为污染您的标记）

$('#Type').change(function() {
  var selection = $(this).val();
  if (selection == "Eletronic") {
    ...
  } else {
    ...
  }
});

但是我建议您将 <label> 和 <select> 元素都包裹在一个元素中

<div id="divSimilar" class="editor-label" style="display:none">
  @Html.LabelFor(model => model.SimilarId)
  @Html.DropDownListFor(model => model.SimilarId, ViewBag.SimilarId as SelectList, "-- Select --")
</div>

所以你可以使用

var similar = $('#divSimilar'); // cache it
$('#Type').change(function() {
  var selection = $(this).val();
  if (selection == "Eletronic") {
    similar.show();
  } else {
    similar.hide();
  }
});

旁注：您还有其他问题。您不能对绑定到的属性和 ViewBag属性使用相同的名称。将 ViewBag 属性更改为（比如）TypeList 和 SimilarIdList 以便获得正确的 2 向模型绑定。

请注意，我还假设您已经包括了 jquery-{version}.js（该视图只显示 @Scripts.Render("~/bundles/jqueryval") 而不是 @Scripts.Render("~/bundles/jquery")，后者需要先出现）

Answer 2

试试这个而不是你的脚本

<script type="text/javascript">

 $('#Type').live('change',function() {
    if (value == "Eletronic") {
        $("#divLblSimilar").show();
        $("#divDdlSimilar").show();
    }
    else {
        $("#divLblSimilar").hide();
        $("#divDdlSimilar").hide();
    }
});
</script>

MVC 上的Onchange

Onchange on MVC

javascript

c#

onchange

razor

asp.net-mvc-4