![](/img/trans.png)
[英]Drop down list not populating in Modal Dialog when item in first drop down is changed
[英]Open Dialog when drop down was changed
當用戶將下拉列表從默認值更改為男性時,我試圖打開一個彈出窗口(某些對話框)。
我使用了上一篇文章中的JS代碼,但沒有任何反應,在inspect元素中,我收到一條消息,告訴我沒有對話框,如何使它起作用?
我也嘗試過發出警報,但是當我更改下拉列表中的選擇時都沒有任何反應...我對JS和Jquery非常陌生...
public class Ad
{
public int Name { get; set; }
public string Email { get; set; }
public IEnumerable<SelectListItem> Gender
{
get
{
return new[]
{
new SelectListItem {Value = "M", Text = "Male"},
new SelectListItem {Value = "F", Text = "Female"}
};
}
}
Index.cshtml代碼。
@model IEnumerable<Ad.Models.Ad>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#M').change(function () {
if ($(this).val() === "F") {
alert("I am an alert box!");
dialog.dialog('open');
}
});
});
</script>
<h3>My APP</h3>
p>
@using (Html.BeginForm())
{
}
@*<br style="margin-bottom:240px;" />*@
@Html.ActionLink("Create", "Create",
null, htmlAttributes: new { @class = "mybtn" })
<p>
</p>
<style type="text/css">
a.mybtn {
background: #fa0088;
}
</style>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
@Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M" })
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
通常,當沒有ID為“ dialog”的div時,就會發生此問題。 javascript變量應初始化為dialog = $('#dialog')
<script type="text/javascript">
$(document).ready(function () {
$("#M").change(function () {
alert($(this).val());
alert($(this).val() == "F");
if ($(this).val() == "F") {
alert("I am an alert box!");
//dialog.dialog('open'); //commenting out this line would tell where the problem lies.
}
});
});
</script>
更新:要使其應用於多個選擇框,應使用類選擇器,例如jQuery的.M
而不是ID選擇器#M
。 首先,我們需要給所有相同類別的M選擇框。
@Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M", @class = "M" })
現在將$("#M").change(function () {
為$(".M").change(function () {
。
$('#M')
替換為$('select')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.