实现JQuery函数以在每次选择DropDownList时触发事件
本文关键字:DropDownList 事件 选择 函数 JQuery 实现 | 更新日期: 2023-09-27 18:20:28
我是MVC和JQuery概念的新手,我被困在这里,请帮助
我正在尝试为我的项目实现级联下拉列表,并且我已经使用Jquery函数实现了级联下拉列表
我的问题是,对于我的项目,我需要增加DropDownList的数量,因为我已经创建了一个按钮来增加DropDownList的行数,但级联的DropDownList只适用于DropDown列表的第一行,而不适用于其他任何行。
第一行调用JQuery函数实现级联函数,但从第二行调用JQuery函数
所以每次从DropDownList中选择一个值时,我都需要帮助调用Jquery函数
我的代码如下
PartialView代码
@using (Ajax.BeginForm("Index", options))
{
<div class="panel panel-info">
<div class="panel-heading"> </div>
<div class="panel-body">
<div class="form-group col-md-offset-4 ">
@Html.Label("Enter TimeSheet Date:")
@Html.Editor("Date", new { htmlAttributes = new { @class = "form-control datepicker" } })
</div>
<table class="table">
<tr>
<th> </th>
<th> Project </th>
<th> Modules </th>
<th> Task </th>
<th> No of Hours</th>
<th> Note </th>
</tr>
@for(int i=0;i< Model.CountForTimesheetForm; i++)
{
<tr>
<td></td>
<td>@Html.DropDownList("ProjectName", new SelectList(Model.projectList, "Value", "Text")
, "Please Select a Project", new { @class = "form-control" })</td>
<td>
<select id="module" name="module" style="width:200px"></select></td>
<td>@Html.Editor("TaskName", new { htmlAttributes = new { @class = "form-control" } })</td>
<td>@Html.Editor("NoOfHour", new { htmlAttributes = new { @class = "form-control" } })</td>
<td>@Html.Editor("Note", new { htmlAttributes = new { @class = "form-control" } })</td>
</tr>
}
<tr>
<td> <button type="submit" class="btn btn-default">Add Row</button></td>
</tr>
</table>
</div>
</div>
}
级联的Jquery代码
<script language="javascript" type="text/javascript">
$(function () {
$('#ProjectName').change(function () {
$.getJSON('/TimeTracker/GetModules/' + $('#ProjectName').val(), function (data) {
var items = '<option>Select a Modules</option>';
$.each(data, function (i, module) {
items += "<option value='" + module.Value + "'>" + module.Text + "</option>";
});
$('#module').html(items);
});
});
});
您正在重复页面标签上不应重复的id属性。
HTML5规范说了同样的话,但换言之。它说ID在其主子树中必须是唯一的,如果我们阅读它的定义,它基本上就是文档
我希望它能帮助你。