jquery - 在select标记内添加额外数据

时间:2017-05-23 00:56:04

标签: javascript jquery html

使用jQuery,如何在表单选择标记中添加一些额外的信息?

在我的搜索中,我看到了jQuery的追加和添加和HTML标签,但看起来他们在项目下面添加了信息,而不是在项目中?

我想添加......

eform="Australian State::1"

进入行......

<select id="state-au" name="state-au">

所以它变成......

<select id="state-au" name="state-au" eform="Australian State::1">

我希望在MODx Evolution电子邮件表单中使用它来使澳大利亚州选择框成为jQuery的必填字段 - 该选择框取决于国家选择框:如果选择澳大利亚,澳大利亚州选择框是所示。我正在使用以下代码执行此操作,因此新代码将添加到此...

$('#country').bind('change', function (e) {
    if( $('#country').val() == 'AU') {
        $('#stateAU').slideToggle('fast');
    }
    else {
        $('#stateAU').hide();
    }
}).trigger('change');

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:4)

使用jQuery的attr()方法向元素添加(或更新)属性:

使用以下内容添加新属性:

$("#state-au").attr("eform","Australian State::1");

删除属性:

$("#state-au").removeAttr("eform");

解决方案:

$('#country').bind('change', function (e) {
    if( $('#country').val() == 'AU') {
        $("#state-au").attr("eform","Australian State::1");
        $('#stateAU').slideToggle('fast');
    }
    else {
        $("#state-au").removeAttr("eform");
        $('#stateAU').hide();
    }
}).trigger('change');

如果要将数据绑定到特定元素,我建议使用.data()。请查看以下示例。

设置数据使用$("#state-au").data("eform", "Australian State::1")

获取数据$("#state-au").data("eform")

删除数据$("#state-au").removeData("eform")

  

。数据()

     

存储与匹配元素关联的任意数据,或者在指定数据存储中返回匹配元素集中第一个元素的值。

     

参考:https://api.jquery.com/data/

     

.data()方法允许我们以一种不受循环引用和内存泄漏安全的方式将任何类型的数据附加到DOM元素。

     

.removeData()

     

.removeData()方法允许我们删除先前使用.data()设置的值。使用键名称调用时,.removeData()将删除该特定值。在没有参数的情况下调用时,.removeData()将删除所有值。

     

参考:https://api.jquery.com/removeData/

&#13;
&#13;
$(document).ready(function() {
  $("#state-au").data("eform", "Australian State::1");
  console.log($("#state-au").data("eform"));
  $("#state-au").removeData("eform");
  console.log($("#state-au").data("eform"));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="state-au" name="state-au"></select>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

$("#state-au").attr("eform", "Australian State::1");

答案 2 :(得分:0)

HTML5支持可用于在DOM上附加其他信息/数据的数据属性。 Jquery使用其data()方法支持此功能

<select id="state-au" name="state-au" data-eform="Australian State::1">

获取我们使用的数据

var eform = $("#state-au").data("eform");

要插入我们使用的数据

$("#state-au").data("eform", "Australian State::1");