代码之家  ›  专栏  ›  技术社区  ›  jason saldo

使用jquery在html中保持键值对在一起?

  •  7
  • jason saldo  · 技术社区  · 16 年前

    在jquery中给定一个带有多个选项的select。

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

    如何存储和检索密钥?

    如果我有多个Select的共享值(和其他方案),那么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");
    
    3 回复  |  直到 9 年前
        1
  •  16
  •   Juan    16 年前

    就像卢卡斯说的,价值属性就是你需要的。使用您的代码,它看起来像这样(我在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
    

    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方法会循环查询匹配的每个元素。

        2
  •  4
  •   Mr Lister hawi    9 年前

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

    例如。:

    <option value=1>Jason</option>
    

    我不知道这将如何处理jquery(我不使用它),但我希望这仍然有用。

        3
  •  1
  •   Ricky    16 年前

    如果您使用HTML5,则可以使用 custom data attribute . 如下所示:

    $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属性可能不是一个选项,因为从那时起,您就无法分辨在表单发布中选择了哪些具有相同值的不同选项。