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>
}

然后只需从所选选项中读取它。我认为它更清晰，并没有使用额外的隐藏选项元素作为属于其他选项的数据的存储。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用Jquery Selector选择Dropdown隐藏选项？

2 个答案: