如何在mvc中使用局部视图时获取下拉列表的选定值?

时间:2015-02-25 06:28:03

标签: javascript jquery asp.net-mvc-4 partial-views cascadingdropdown

我正在使用局部视图在另一个内部显示视图而部分视图具有drodown因此如何获取该下拉列表的值实际上我想显示基于第一个下拉列表的值的另一个下拉列表是我的代码细节:

局部视图:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <link href="~/Content/control.css" rel="stylesheet" />
    <fieldset>
        <legend></legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.CompanyID , new {@class="lbldis"})
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(Model => Model.CompanyID, new SelectList(ViewBag.CompanyList as System.Collections.IEnumerable, "_CompanyID", "Company"), "- Select -",new { @class = "txtbox",id="ddln" })
            @Html.ValidationMessageFor(model => model.CompanyID)
        </div>
        <br />
        <div>
            @Html.DropDownListFor(Model => Model.ClientID, new SelectList(ViewBag.ClientList as System.Collections.IEnumerable, "_ClientID", "Company"), "- Select -",new { @class = "txtbox" })
            @Html.ValidationMessageFor(model => model.ClientID)
        </div>
    </fieldset>
}

以及我调用此局部视图的视图:该视图的名称为Index:

<div id="tab-1">
    @Html.Partial("~/Views/PartialViews/_company.cshtml")              
</div>

所有下拉列表工作正常并获取值,但只有问题是javascript。请帮助我在哪里写javascript,即在局部视图或索引中我调用我的局部视图以及如何根据第一个值显示另一个下拉列表。

到目前为止我所尝试的内容如下:

<script type="text/javascript">
    $("#ddln").change(function onchange(dropdown) {
        var myindex = dropdown.selectedIndex;
        var SelValue = dropdown.options[myindex].value;
        if (SelValue == 'Client3')
        {
            var see = document.getElementById("ddln");
            see.style.display = "";
        }
    })
</script>

2 个答案:

答案 0 :(得分:0)

根据第一个中的值隐藏或显示第二个下拉列表:

var clients = $('#ClientID');
$('#CompanyID').change(function() {
  var id = $(this).val();
  if (id == 'Client3') { // assume you want to hide it if the selected option value is 'Client3'
    clients.hide();
  } else {
    clients.show();
  }
});

修改

根据OP的上次修改,将默认id属性从id="Company"更改为id="ddln",代码将被修改为

$('#ddln').change(function() { ...

答案 1 :(得分:0)

如果您使用的是jquery,则可以使用on()函数从主视图处理局部视图的控件。早些时候(1.9之前)你可以使用live()但是从那以后就已经弃用了。

  $(document).ready(function () {
        $('body').on("change", "#ddln", function (evt) {

            if ($(this).val() != 'val1')  //assume if val1 is the value against which we wish to show. 
            {
                $('#ndl').show();
            }
            else
            {
                $('#ndl').hide();
            }
        });
    });