Jquery class selector instead of id selector for select option[Answered] RSS

• • Reply
  shahid.majee...

  Member

  296 Points

  940 Posts

  Jquery class selector instead of id selector for select option

  Jul 05, 2019 11:31 AM|shahid.majeed|LINK

  Hi,

  I am trying to loop through my select list to store keys and values. But i want to select the selectlist with class selector instead of id selector.

  <asp:ListBox ID="listOfOpenBills" runat="server" Width="95%" Height="100px" CssClass="openBill"></asp:ListBox>
  
  function loadKeys() {
  var Keys = [];
  var Values = [];
  $.each($("#<% = listOfOpenBills.ClientID %> option"), function (index, item) {
      Keys.push(item.value);
      Values.push(item.innerHTML);
  });
  }

• • Reply
  mgebhard

  All-Star

  49741 Points

  22062 Posts

  Re: Jquery class selector instead of id selector for select option

  Jul 05, 2019 01:21 PM|mgebhard|LINK

  Then use a class selector...

  $(".openBill")

  The jQuery docs cover selectors quite well.

  https://api.jquery.com/category/selectors/

• • Reply
  shahid.majee...

  Member

  296 Points

  940 Posts

  Re: Jquery class selector instead of id selector for select option

  Jul 05, 2019 01:22 PM|shahid.majeed|LINK

  Yes i also want to get options in the listbox as well. How i can do that?

  /Shahid

• • Reply
  mgebhard

  All-Star

  49741 Points

  22062 Posts

  Re: Jquery class selector instead of id selector for select option

  Jul 05, 2019 01:43 PM|mgebhard|LINK

  shahid.majeed

  Yes i also want to get options in the listbox as well. How i can do that?

  /Shahid

  Add "option" to the selector.

      <asp:ListBox ID="listOfOpenBills" runat="server" Width="95%" Height="100px" CssClass="openBill">
          <asp:ListItem Value="1">1</asp:ListItem>
          <asp:ListItem Value="2">2</asp:ListItem>
          <asp:ListItem Value="3">3</asp:ListItem>
      </asp:ListBox>
  
      <script>
          $.each($(".openBill > option"), function (index, item) {
              console.log(item);
          });
      </script>