使用 jQuery 将 HTML <select/> 中的键值对保持在一起？

Question

在 jQuery 中给定一个具有多个选项的选择。

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

密钥应该如何存储和检索？

ID 可能是一个不错的地方，但如果我有多个选择的共享值（和其他场景），则不能保证唯一。

谢谢

并本着 TMTOWTDI 的精神。

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");

Answer 1

就像卢卡斯所说， value 属性就是你所需要的。使用您的代码，它看起来像这样（我向选择添加了一个 id 属性以使其适合）：

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

jQuery 允许您使用 val() 方法获取值。在选择标签上使用它，您可以获得当前选定选项的值。

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

为了以防万一，.each 方法循环遍历查询匹配的每个元素。

Answer 2

超文本标记语言 <option> 标签有一个名为“value”的属性，您可以在其中存储密钥。

例如。：

<option value=1>Jason</option>

我不知道这将如何与 jQuery 一起使用（我不使用它），但我希望这仍然有帮助。

Answer 3

如果您使用的是 HTML5，则可以使用 自定义数据属性. 。它看起来像这样：

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

然后要获取所选的密钥，您可以执行以下操作：

var key = $('select option:selected').attr('data-key');

或者，如果您使用 XHTML，则可以创建自定义命名空间。

既然您说键可以重复，那么使用 value 属性可能不是一个选项，因为这样您就无法知道在表单帖子上选择了哪些具有相同值的不同选项。