javascript - 如何使用 jquery 获取 var 中下拉列表的所有值？

Question

我想将字符串与下拉列表中的所有值进行比较。 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 值进行比较。我尝试使用此代码获取下拉列表的所有值。但它不起作用。

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

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

Answer 1

你必须在你的情况下循环选项。 #DropDownListVendor 选择器只会为您提供 select 元素本身和当前选择的值，而不是所有可能的值。

$('#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>