0

在Steven Sanderson 的博客的帮助下，我实现了一个视图，其中生成了动态数量的文本框和 DropDownList 。一切正常。但我希望直到每个下拉列表都有一个值，表单无法提交，如果没有下拉列表，我的意思是所有动态内容都被删除，那么表单不能提交。

主视图代码：

<div id="Part2">
 <h3><u>Services:</u></h3><br />
 <div id="EditorRows">
  <%Html.RenderPartial("_InsertServices", Model);%>
 </div>
 <div id="DontAppend">
  <%= Html.ActionLink("+ Add Another Service", "Add", null, new { id = "addItem" }) %>
  <input type="button" id="btnEdit" value="Edit" hidden="hidden"/>
  <input type="button" id="btnDone" value="Done" />
 </div>
</div>

部分视图代码：

<div class="EditorRow">
 <% using (Html.BeginCollectionItem("services")){ %>
 <table id="table1">
  <tr>
   <td>NOS:</td>
   <td><%:Html.DropDownListFor(model=>model.Id,(SelectList)ViewData["crmServiceType"] as SelectList,"---")%></td>
   <td>Comment:</td>
   <td><%=Html.TextBoxFor(model => model.Comment, new { size = "20" })%></td>
   <td><a href="#" class="deleteRow">delete</a></td>
  </tr>
 </table>
<% } %>
</div>

JavaScript：

$("#addItem").click(function () {
  $.ajax({
  url: this.href,
  cache: false,
  success: function (html) { $("#EditorRows").append(html); }
  });
  return false;
});
$("a.deleteRow").live("click", function () {
  $(this).parents("div.EditorRow:first").remove();
  return false;
});

这是生成的 HTML 源代码。

4

2 回答 2

1

.live()已弃用，now removed in jQuery version 1.9+因此请改用.on()处理程序。
不知道你为什么添加:first，我猜你有多个EditorRowdiv，如果是这种情况，那么你应该试试这个：

 $("#EditorRows").on("click", "a.deleteRow", function () {
    var selID = $(this).closest("div.EditorRow").find('select').attr('id'); //<--give you the select list id
    $(this).closest("div.EditorRow").andSelf().remove();
    return false;
 });

不知道你想要这个，但你可以通过这种方式实现：

$("#EditorRows").find('select').attr('id');
于 2013-03-07T05:11:15.377 回答
1

如果我理解正确并且您的标记看起来像

<div class="EditorRow">
    <input type="hidden" value="6c2fa95a-cc3e-44d9-b460-b561276196c1" autocomplete="off" name="services.index">
    <table id="table1">
    <select>
        <option value="">Select</option>
        <option value="1">Value1</option>
        <option value="2">Value2</option>
    </select>
</div>

你可以这样做

$(function(){
    $("#btnDone").click(function(){
        if ($("div.EditorRow").length) {
            $("div.EditorRow select").each(function(){
                if (!$(this).val()) {
                    alert("You need to choose a value before submit");
                    return false;
                }
                //do your submit
            });
        } else {
            alert("You need to add at least one service before submit.")
        }
    });
});
于 2013-03-07T05:46:51.080 回答