我正在使用 jquery select2 插件来提示表单字段。我正在尝试访问存储在原始隐藏输入字段数据属性中的数据。我需要来自这些属性的数据,以便可以通过 Ajax 将它们发送到 php 脚本。有人对如何做到这一点有任何建议吗?我似乎无法在谷歌或官方网站上找到答案。
谢谢
我正在使用 jquery select2 插件来提示表单字段。我正在尝试访问存储在原始隐藏输入字段数据属性中的数据。我需要来自这些属性的数据,以便可以通过 Ajax 将它们发送到 php 脚本。有人对如何做到这一点有任何建议吗?我似乎无法在谷歌或官方网站上找到答案。
谢谢
您也可以尝试以下方法。假设您有一个选择,您可以使用来自 jQuery 的标准数据属性语法向选项添加附加信息,请参阅jQuery data() API。
<select id="product">
<option value="prod_x" data-additional-info="1234X">Product X</option>
<option value="prod_y" data-additional-info="1234Y">Product Y</option>
</select>
现在,在您的 javascript 中,您可以使用 .select2("data") 来访问选项元素本身,根据 api 文档 - “获取或设置选择。类似于 val 方法,但适用于对象而不是 ids”。要访问选项对象本身,您必须通过元素,即所有选定选项的数组。在下面的示例中,选择不是多值可选的,因此我总是使用数组中的第一个对象,除了获取对象之外,我将来自“.element[0]”的结果包装在 $() 中以使其成为 jQuery 对象.
// Get the selected option using select2's api...
var selectedOption = $($("#product").select2("data").element[0]);
现在我们有了一个 jQuery 对象,我们可以使用jQuery data() API来检索存储在 option 元素上的任意数据。
var additionalInfo = selectedOption.data("additional-info");
附加信息变量现在将包含“1234X”或“1234Y”,具体取决于选择了哪一个。
使用它,您可以消除包含附加数据的隐藏输入,并将其直接绑定到所选选项。
就像在文档中一样:
//模板:
<select>
<option value="0" data-foo="bar">option one</option>
</select>
//Initiate select2
$("select").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
});
//access custom data
function format(state) {
var originalOption = state.element;
return $(originalOption).data('foo');
}
我们可以获取所选选项的数据属性
var seledted = $("#selectId").select2().find(":selected");
var s = $(seledted).data("data-field");
我最终通过
$(".suggestive-entry").click(function() {
var val = $(this).siblings('input:hidden').attr('data-field');
alert(val);
});
如您所见,我使用了兄弟姐妹属性来获取最接近生成单击事件的 select2 框的隐藏输入。