javascript - 如何获取动态创建的DropDownList的ID并检查其值是否改变？

Question

在 Steven Sanderson's blog 的帮助下，我实现了一个生成动态数量的文本框和 DropDownList 的 View 。 。一切正常。但我希望直到每个下拉列表都有一个值为止，表单无法提交，而且如果没有下拉列表，我的意思是删除所有动态内容，则不得提交表单。

主视图代码:

<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>

PartialVew 代码:

<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;
});

Here是生成的 HTML 源代码。

Answer 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.")
        }
    });
});