如何使用 Jquery Selector 选择下拉隐藏选项？答案

【问题标题】：How to Select Dropdown hidden option with Jquery Selector?如何使用 Jquery Selector 选择下拉隐藏选项？
【发布时间】：2018-01-09 10:29:13
【问题描述】：

<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();

【问题讨论】：

试试$("#prodname option:selected").next().text()
选择器是:hidden。选择器错误$("#prodname").find(":hidden").text()，从选择器中删除option。

标签： javascript jquery asp.net-mvc-4 jquery-ui jquery-plugins

【解决方案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>

【讨论】：

但我的
@SohailAsghar 我们到底应该怎么知道，那么您的 id 将被复制，并且 id 应该是唯一的
var prodUp = $("#prodname option:selected").next().text();我们可以这样。

【解决方案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>

【讨论】：

但我的
在您的代码中，您向我们展示了 select 不在 foreach 循环内。如果您有重复标识符的问题，并且您也将遍历所有这些相同的产品列表 - foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist) - 如果这是一个问题，您需要向我们展示该循环，但从您在问题中提出的问题你有一个答案如何解决它。