更改下拉列表时打开对话框
Open Dialog when drop down was changed
当用户将下拉列表从默认值(男性更改为女性)时,我正在尝试打开一个弹出窗口(一些对话框).
我使用了上一篇文章中的JS代码,但没有任何反应,在检查元素中,我收到消息告诉我没有对话框,知道如何使其工作吗?
我也尝试过警报,但是当我更改下拉列表中的选择时也没有任何反应......我对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>
通常,当没有div 的 id 为"对话框"时,就会出现问题。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:要将其应用于多个选择框,您应该使用类选择器,例如 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')
相关文章:
- 从服务器加载带有级联下拉列表的 jQuery 对话框
- 在选择框(下拉列表)中检查元素 ID 值
- 防止在经过不同的菜单项时打开新的下拉列表
- 同时打开两个下拉列表时出现问题
- asp.net 下拉列表中列表值在jQuery对话框中单击按钮时重置
- Asp.net 下拉列表值在 jquery 对话框中不会更改
- 基于第一个 - JQuery 对话框加载第二个下拉列表
- 下拉列表更改函数不会在 Jquery 对话框中触发
- 对每个复选框/下拉列表的更改强制POST
- 选择框(下拉列表)以加载主题脚本
- 浏览器刷新时,JQuery多选复选框下拉列表未被取消选中
- 对话框中的Asp.NET下拉列表
- 如何在HTML/JavaScript中构建基于用户输入(文本框/下拉列表)的网站URL
- 显示选项与复选框下拉列表- HTML/JAVASCRIPT
- 在特定的单选按钮点击启用文本框/下拉列表在MVC使用jquery
- 当窗体重新打开时,下拉列表为空
- 如何通过单击外部按钮打开引导程序下拉列表
- 如何创建dojo组合框下拉列表
- focus() 不适用于选择框(下拉列表)
- 更改下拉列表时打开对话框