Javascript-如何遍历中继器中的控件并找到某些下拉列表的值

Question

I'm currently experiencing a problem trying to find the selected values of some dropdown lists in a repeater. When I click a button on my form, I want to see what values the user gave in the dropdowns before I go into a postback.

My repeater looks like this:

 <asp:Repeater ID="rptProducts" runat="server">
     <HeaderTemplate>
        <tr class="Header">
          <td>Eye
           </td>
          <td> Code
          </td>
        </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
         <td><asp:DropDownList ID="ddlEye" runat="server" onchange='addToEye(this)'>
             <asp:ListItem Text="--Select--" />
              <asp:ListItem Text="Right" />
              <asp:ListItem Text="Left" />
               </asp:DropDownList>
         </td>
         <td>
             <asp:TextBox ID="txtTariff" size="7" runat="server" AutoPostBack="true" OnTextChanged="txtTarrif_TextChanged"
                                Text='<%# DataBinder.Eval(Container.DataItem, "Tariff") %>' />
         </td>
     </tr>
   </ItemTemplate>
</asp:Repeater>

Now the repeater gets built with a default of two rows, so the user should choose a value for each dropdown. I am trying to do validation on this. I have tried this:

var right = 0;
var left = 0;
var inputs = document.getElementById('<%=rptProducts.ClientID %>').getElementsByTagName("select");
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].id.options[dropdown.selectedIndex].value == "Right") {
      right += 1;
      } else if (inputs[i].id.options[dropdown.selectedIndex].value == "Left") {
      left += 1;
   }
}

but when I debug in Firefox, I get a exception:

document.getElementById(...) is null

I have tried to make a seprate script tag with the following:

<script type="text/javascript">
    $(document).ready(function () {
        var name = [];
        var input = $("#<%= rptProducts.ClientID %>").find("select").each(function (i) {
            name[i] = $(this).attr('id');
            //alert($(this).attr('id'));
            //alert($(this).attr('name'));
        });
    });
</script>

But nothing happens in this function. Is there a way for me to properly find the dropdown lists and loop through the values to effectively do validation?

Answer 1

A Repeater does not add it's ID (ClientID) to the HTML, so you cannot use that in jQuery as a selector. Wrap the Repeater with an element that has an ID and use that.

<table id="rptProductsTable">
    <asp:Repeater ID="rptProducts" runat="server">
    </asp:Repeater>
</table>

var input = $("#rptProductsTable").find("select").each(function (i) {