如何使用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>