如何使用jQuery选择器选择下拉隐藏选项？

Question

<select class="form-control" id="prodname" name="pname" >
    <option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
    @{
        foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
        {
            <option value="@product.Id">@product.Product_Name</option>
            <option hidden>@product.Quantity</option>
        }
    }
</select>

我要选择此选项。

<option hidden>@product.Quantity</option>

我尝试了此选择器，但无法获取文本。

var productunitprice = $("#prodname option").find("hidden").text();

Answer 1

您可以使用var text = $("option:selected",this).next().text()下面的示例。

 $("#prodname").change(function() { var text = $("option:selected",this).next().text() console.log(text) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="prodname"> <option value="1">1</option> <option hidden>1.1</option> <option value="2">2</option> <option hidden>2.2</option> </select> 

Answer 2

作为添加许多未使用和隐藏选项的替代方法。 您可以直接使用数据属性（例如data-unit-price将单价添加到相关选项。

foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
    <option value="@product.Id" data-unit-price="@product.Quantity">@product.Product_Name</option>
}

然后只需从所选选项中读取它即可。 以我的拙见，它更干净，并且不使用其他隐藏的选项元素来存储属于其他选项的数据。

 $(document).ready(function() { $("#prodname").change(function() { var productunitprice = $("option:selected", this).data('unitPrice') console.log(productunitprice) }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control" id="prodname" name="pname"> <option value="1" data-unit-price="5.25">product 45</option> <option value="2" data-unit-price="12.99">product 94</option> </select>