javascript - Select2 自定义读取自定义数据属性

Question

我将 jquery select2 插件用于提示性表单字段。我正在尝试访问存储在我原来的隐藏输入字段数据属性中的数据。我需要来自这些属性的数据，以便我可以通过 Ajax 将它们发送到 php 脚本。有没有人对如何做到这一点有任何建议？我似乎无法在谷歌或官方网站上找到答案。

谢谢

Answer 1

您也可以尝试以下方法。假设您有一个选择，您可以使用 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 方法，但使用对象代替的 ID”。要访问选项对象本身，您必须遍历元素，即所有选定选项的数组。在下面的示例中，select 不是多值可选的，所以我总是使用数组中的第一个对象，除了获取对象外，我将“.element[0]”的结果包装在 $() 中，使其成为 jQuery 对象.

 // Get the selected option using select2's api...
 var selectedOption = $($("#product").select2("data").element[0]);

现在我们有了一个 jQuery 对象，我们可以使用 jQuery data() API如下检索存储在选项元素上的任意数据。

 var additionalInfo = selectedOption.data("additional-info");

附加信息变量现在将包含“1234X”或“1234Y”，具体取决于选择的是哪一个。

使用它，您可以消除保存额外数据的隐藏输入，并将其直接绑定(bind)到所选选项。