使用所选选项发送隐藏值

Question

我有一个下拉 select 表单，如下所示：

<select id="selection">
    <option>try 1</option>
    <option>try 2</option>
    <option>try 3</option>
</select>

我只是像这样定位这些值：

var selected = $('#selection').val();

现在我该如何定位这些选项中的隐藏值而不是选项标签之间的值？

类似于：

<select id="selection">
        <option value="selected 1">try 1</option>
        <option value="selected 2">try 2</option>
        <option value="selected 3">try 3</option>
</select>

定位值？

Answer 1

你说的"hidden value"，其实就是option的value属性。标签之间的是选项的文本。

当指定 value 属性时，JQuery 中的 .val() 方法已经 return 了正确的值。

var selected = $('#selection').val();
alert(selected);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="selection">
        <option value="selected 1">try 1</option>
        <option value="selected 2">try 2</option>
        <option value="selected 3">try 3</option>
</select>

Answer 2

你根本不需要零钱。 select 选项的 "value" 始终是 value 属性，EXCEPT 在没有定义时除外。当 HTML 中没有设置 "hidden value"（即 value="some value"）时，代码将默认为为选项定义的文本。

使用您的代码，<option>try 1</option> 的值（即没有 value 属性）是 "try 1"，而 <option value="selected 1">try 1</option> 的值（即没有有 value 属性）是 "selected 1".

事实上，您真正需要为select选项定义value属性的唯一情况是您需要捕获的值与显示给用户的内容不同。例如，如果您正在编码 <option value="1">1</option>，您实际上并不需要 value 属性。

Answer 3

如果你想要 value 属性，那么你可以使用相同的代码

var selected = $('#selection').val();

它将return你选择了1

但是如果你想获得节点值你可以使用

var selected = $('#selection').val();
var option = $('#selection option');
var selectedValue;
for(var i=0;i<option.length;i++)
{
    if(option[i].value==selected)
    selectedValue = option[i].childNodes[0].nodeValue;
}
console.log(selectedValue)

会return你试试1

使用所选选项发送隐藏值

sending hidden value with selected optiom

html

javascript

forms

select