使用JQuery在HTML <select />中保持键值对?

jas*_*ldo 8 html javascript jquery

在JQuery中给出一个带有多个选项的select.

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

如何存储和检索密钥?

ID可能是一个好的地方,但如果我有多个select的共享值(和其他场景),则不能保证唯一.

谢谢

并本着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");
Run Code Online (Sandbox Code Playgroud)

Jua*_*uan 17

就像卢卡斯所说,价值属性就是你所需要的.使用你的代码看起来像这样(我在select中添加了一个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
Run Code Online (Sandbox Code Playgroud)

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
} );
Run Code Online (Sandbox Code Playgroud)

以防万一,.each方法遍历查询匹配的每个元素.


Luc*_*ter 5

HTML <option>标记具有一个称为“值”的属性,您可以在其中存储密钥。

例如:

<option value=1>Jason</option>
Run Code Online (Sandbox Code Playgroud)

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