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'的值？

Answer 1

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

obj变量中的

我将获得data的所有selected node。

Answer 2

another SO question

回答了这个问题

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

$（ “＃示例”）SELECT2（）找到（ “：选择了”）。数据（ “ID”）;

首先获取select2数据，然后使用jQuery找到所选的选项，最后找到数据属性。

Answer 3

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

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

Answer 4

以下为我工作。想法是使用＆＃34;改变＆＃34;功能如下

<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
});

Answer 5

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

以上给出的语句将返回选择选项，然后将该返回结果如下所示：

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

这将返回属性值。

Answer 6

不知道插件，并且没有检查代码是否有效我想象它会是这样的：

$('.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?
});

Answer 7

将select2置于标记模式，它会对你有所帮助。要么尝试下面类似的代码，它可能适合你...

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

Answer 8

我知道这是一个老帖子，但我正在努力解决同样的问题。这是我和我的好朋友Thys终于开始工作的解决方案：

<script type="text/javascript">

$(document).ready(function ()
{
    $("#e1").select2();

    $("#e1").change(function () {

        var theID = $("#e1").val();
        $('#staffNr').val(theID);
        $('#staffNr').val();
            //var theID = $(test).select2('data').id;
            var theSelection = $(test).select2('data').text;
            $('#selectedID').text(theID);
            $('#selectedText').text(theSelection);
    });

});

@Html.Hidden("fieldName","staffNr");

这在我的MVC 4视图中有效，我的html表单中的最后一行正确地添加到模型中。如果你使用我的答案，请不要忘记向上投票:)我没有太多的声誉......

Answer 9

el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value

Answer 10

我希望你解决了这个问题。在这里，我们不使用select2()，如果我们使用select2()，则无法使用formatNoMatches, on-change....

等所有其他功能

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

Answer 11

所选项目的params.data.element对象包含您要查找的数据。

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

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

Answer 12

您可以访问在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"));
    });

Answer 13

为您的选择元素设置一个ID，这将起作用

$('select#your-id').find('option[value="'+$('#your-id').val()+'"]').attr('data-attribute');

Answer 14

您必须使用 on（“ change” ... ），因为这是动态生成的选项列表。

$('.select_class').on("change",function(){
    var selected_value= $('.hakemler').val();
    var wanted= $('.select_class').find('option[value="'+selected_value+'"]').attr('data-foo');
    alert(selected_value+" "+wanted);
});

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

14 个答案: