从select2的选定选项中获取属性值

Question

我正在使用来自http://ivaynberg.github.io/select2/select2-latest.html的Select2插件，它能够正常工作，但是我无法从选项属性中获取值。

我的选择菜单如下：

<select name="invoice_line[0][vat]" class="vat">
    <option value="20440" data-value="21.00" data-name="20440" selected="selected">21%</option>
    <option value="20441" data-value="6.00" data-name="20441">6%</option>
    <option value="20442" data-value="0.00" data-name="20442">0%</option>
</select>

如何获取所选选项的属性"data-value"、"data-name"和"value"的值？

- Leon van der Veen

Answer 1

obj = $("#dropdown").select2("data")

在obj变量中，我将获得所选节点的所有数据。

- utkarsh

---

不工作，obj = undefined。 我正在使用标记。 - Jp Silver

Answer 2

这个问题在另一个SO问题中得到了回答。

使用select2没有直接的方法，您可以使用select2数据和jQuery的组合：

$("#example").select2().find(":selected").data("id");

首先获取select2数据，然后使用jQuery找到所选选项，最后使用data-attribute。

- pymarco

Answer 3

我们可以使用select2数据和jQuery的组合：

$("#example").select2('data').element[0].attributes['data-name'].value

- Shamsudheen

---

$("#example").select2('data')[0].element.attributes['data-name'].value 对我很有效。 - felixmpa

Answer 4

以下方法对我有效。思路是使用“change”函数，如下所示。

<select class="drop-down">
     <option value="0">A</option>
     <option value="1">B</option>
</select>

$('.drop-down').select2().on("change", function(e) {
    var obj = $(".drop-down").select2("data");
    console.log("change val=" + obj[0].id);  // 0 or 1 on change
});

- Kunal

---

未捕获的类型错误：无法访问属性0，obj未定义。 - Jp Silver

Answer 5

var return_option = $("#your-select-input-id").select2().find(":selected")[0];    

以上给出的语句将返回选择选项，然后将返回结果放置在以下位置：

var name_of_attribute = $( return_option ).attr('name-of-attribute');

这将返回属性值。

- Hiren P

---

先生，您是我的英雄！ 我简化了一下，使用了 var obj = $($("#your-select-input-id").select2().find(":selected")[0]); 但两种方法都能正常工作100% :)，我讨厌它们设置的方式。 - Jp Silver

Answer 6

你可以查看DOM结构来访问属性：

<select id="select_name">
   <option value="20440" data-value="21.00">21%</option>
   <option value="20441" data-value="6.00">6%</option>
   <option value="20442" data-value="0.00">0%</option>
</select>

    $('#select_name option').each(function (index) {
        console.log($(this).attr("data-value"));
    });

- patriciabravos

Answer 7

params.data.element 对象保存了所需的数据。

其中 .foo 是我调用的选择元素，而我想要访问选项中的数据属性是 data-bar="some value"。以下方法适用于我：

var $fooSelect = $('.foo');
$fooSelect.on(function (e) {
  console.log($(e.params.data.element).data('bar'));
});

- brianrhea

Answer 8

将select2置于标记模式下，它会帮助你。 或者 尝试下面类似的代码，它可能适用于你...

$("$id").select2("val", option);
$("$id").attr("data-name");

- Praveen D

Answer 9

对于插件我没有什么想法，但是如果不检查代码是否可行，我想它应该是这样的：

$('.vat li').each(function(){
     var me = $(this),
     mevalue = me.attr('value'),
     datavalue = me.data('value'),
     dataname = me.data('name');

     //do what you want with the data?
});

- Jamie Hutber

Answer 10

希望你已经解决了这个问题。在这里我们不使用 select2()，如果我们使用 select2()，它将无法使用所有其他函数，如 formatNoMatches, on-change....。

$("#example").find(":selected").data("id");

- Selvamani