在 mvc 中使用局部视图时如何获取下拉列表的选定值?
How to get selected value of dropdown when using partial view in mvc?
我正在使用局部视图在另一个视图中显示一个视图,并且局部视图有下拉列表,所以如何获取该下拉列表的值实际上我想根据第一个下拉列表的值显示另一个下拉列表,这是我的详细代码:
局部视图:
@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>
}
我调用这个部分的视图 view:and 该视图的名称是索引:
<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>
根据第一个中的值隐藏或显示第二个下拉列表:
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() { ...
如果您使用的是 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();
}
});
});
我正在使用局部视图在另一个视图中显示一个视图,并且局部视图有下拉列表,所以如何获取该下拉列表的值实际上我想根据第一个下拉列表的值显示另一个下拉列表,这是我的详细代码:
局部视图:
@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>
}
我调用这个部分的视图 view:and 该视图的名称是索引:
<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>
根据第一个中的值隐藏或显示第二个下拉列表:
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() { ...
如果您使用的是 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();
}
});
});