如何使用jquery获取var中dropdownlist的所有值？

Question

我想比较字符串与dropdownlist中的所有值。 dropdownlist的哪个值与该字符串匹配，应该被选中。

例

<div class="col-lg-3">
     <asp:DropDownList ID="DropDownListVendor" class="form-control text-box-border" runat="server" DataSourceID="SqlDataSource1" DataTextField="vendor_name" DataValueField="vendor_name"></asp:DropDownList>
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Nibrass_DBConnectionString %>" SelectCommand="SELECT [vendor_name] FROM [Vendor_tb]"></asp:SqlDataSource>
</div>

DropDownListVendor返回并在下拉列表[Compaq，Hp]中显示两个值。

现在我想比较一个字符串与所有的dropdownlistvendor值。 我尝试使用此代码获取dropdownlist的所有值。 但它不起作用。

var vendorArr = [];
$('#DropDownListVendor').each(function() {
  vendorArr.push($(this).attr('value'));
});
alert("vendor Array ==" + vendorArr[0]);  

它在警报vendor Array == Undefined返回。 谢谢。

Answer 1

你必须在你的情况下循环options 。 #DropDownListVendor选择器只会获取select元素本身和当前selected value ，而不是所有可能的值。

$('#DropDownListVendor option').each(function() {
    vendorArr.push($(this).attr('value'));
});

工作范例：

 var vendorArr = []; $('#DropDownListVendor option').each(function() { vendorArr.push($(this).attr('value')); }); console.log(vendorArr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="DropDownListVendor"> <option value="Compaq">Compaq</option> <option value="HP">HP</option> <option value="Lenovo">Lenovo</option> <option value="IBM">IBM</option> </select> 

Answer 2

您可以使用.map()类的方式遍历选择列表中的选项

var vendorArr = $("#DropDownListVendor option").map(function() {
  return this.value;
}).get();

因为，当你使用asp母版页时，asp下拉列表id在html中呈现时可能会改变，你可以使用Attribute Ends With Selector来解决这个问题：

var vendorArr = $("[id$='DropDownListVendor'] option").map(function() {
  return this.value;
}).get();