[英]Open Dialog when drop down was changed
I am trying to open a pop up (some dialog) when the user changes the drop down list from the default value which is male to female. 当用户将下拉列表从默认值更改为男性时,我试图打开一个弹出窗口(某些对话框)。
I used the JS code from a previous post but nothing happens, in the inspect element I get message that tells me there is no dialog, any idea how to make it work? 我使用了上一篇文章中的JS代码,但没有任何反应,在inspect元素中,我收到一条消息,告诉我没有对话框,如何使它起作用?
I've also tried with an alert but nothing happens either when I change the selection in the drop down list... I'm very new to JS and Jquery ... 我也尝试过发出警报,但是当我更改下拉列表中的选择时都没有任何反应...我对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"}
};
}
}
The Index.cshtml code. 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>
Normally the problem occurs when there is no div with an id as 'dialog'. 通常,当没有ID为“ dialog”的div时,就会发生此问题。 The javascript variable should be initialized as dialog = $('#dialog')
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>
update: To make it applied to the multiple select boxes, you should use class selector eg .M
of jQuery instead of id selector #M
. 更新:要使其应用于多个选择框,应使用类选择器,例如jQuery的.M
而不是ID选择器#M
。 For that first we need to give same class M all the select boxes. 首先,我们需要给所有相同类别的M选择框。
@Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M", @class = "M" })
Now change $("#M").change(function () {
to $(".M").change(function () {
. 现在将$("#M").change(function () {
为$(".M").change(function () {
。
$('#M')
替换为$('select')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.