在JQuery中提供带有多个选项的选择。

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

密钥应如何存储和检索？

该ID可能不错，但是如果我具有多个选择的共享值(和其他情况)，则不能保证该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");

解决方案

回答

HTML<option>标记具有一个称为"值"的属性，我们可以在其中存储密钥。

例如。：

<option value=1>Jason</option>

我不知道如何将它与jQuery配合使用(我不使用它)，但是我希望这对我们有所帮助。

回答

就像lucas所说的那样，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()方法获取值。在select标签上使用它可以获取当前选定选项的值。

$( '#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方法会循环遍历查询匹配的每个元素。

回答

如果我们使用的是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属性可能不是一个选项，因为那样一来我们将无法判断在表单发布中选择了哪个具有相同值的不同选项。