如何使用jQuery选择器选中下拉框中的隐藏option？

嘿，我来帮你捋清楚问题出在哪，还有怎么解决～

首先你用的选择器$("#prodname option").find("hidden").text()是不对的：

• 第一，hidden是个HTML属性，不是标签，不能用find("hidden")去查找；
• 第二，你的结构里每个产品选项后面紧跟着一个藏起来的数量选项，得针对选中的那个产品选项，去找它的下一个兄弟元素才行。

按你当前的HTML结构来解决 #

当用户选好产品后，你可以这么写代码拿到数量：

// 先拿到当前选中的产品选项
var selectedProdOption = $("#prodname option:selected");
// 找到它后面那个带hidden属性的选项，再拿文本
var productQuantity = selectedProdOption.next("option[hidden]").text();
console.log(productQuantity); // 这里就能输出对应的数量啦

更推荐的优化方案 #

其实完全没必要多写一个hidden选项来存数量，这种方式有点绕还容易出问题。不如直接把数量存在产品选项的data-*属性里，既简洁又规范：

<select class="form-control" id="prodname" name="pname" >
    <option value="0" disabled="disabled" selected="selected">-- 选择产品 --</option>
    @{ 
        foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist) { 
            <!-- 把数量存在data-quantity属性里 -->
            <option value="@product.Id" data-quantity="@product.Quantity">@product.Product_Name</option> 
        } 
    }
</select>

这样获取数量就超级简单了：

var productQuantity = $("#prodname option:selected").data("quantity");
console.log(productQuantity);

这种方式既符合HTML语义，后期维护也更方便～

内容的提问来源于stack exchange，提问作者Sohail Asghar