Javascript 从select2 selected选项获取属性值

我使用的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>

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

21%
6%
0%

---

如何获取所选选项的“数据值”、“数据名称”和“值”属性的值？

不知道插件，如果不检查代码是否工作，我想它会是这样的：

<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>

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

---

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

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

---

我知道这是一个老帖子，但我一直在努力解决这个问题。这就是我和我的好朋友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);
    });

});

这在MVC4视图中起作用，html表单的最后一行正确添加到模型中。如果你用我的答案，请别忘了投赞成票：）我没有什么名气…

这是我的回答

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

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

$（“#示例”）.select2（）.find（“：selected”）.data（“id”）

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

---

我希望你解决了这个问题。这里我们不使用

select2（）

，如果我们使用

select2（）

它将无法使用所有其他函数，如

formatNoMatches，on change….

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

---

在

obj

变量中，我将获得

所选节点的所有
数据
所选项的
参数data.element
对象保存您要查找的数据

其中，
.foo
是我正在调用的select元素，我要访问的选项中的data属性是
data bar=“some value”
以下内容对我有效：

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

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

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

跟随对我有用。想法是使用“更改”功能，如下所示

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


A.
B
$（'.drop-down'）。在（“更改”，函数（e）上选择2（）{
var obj=$（“.drop-down”）。选择2（“数据”）；
console.log（“change val=“+obj[0].id）；//更改时为0或1
});
您可以访问在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"));
    });


21%
6%
0%
$（“#选择_名称选项”）。每个（函数（索引）{
log（$（this.attr（“数据值”））；
});
为您的select元素设置一个id，这将起作用

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

因为这是一个动态生成的选项列表，所以您必须使用打开（“更改”…）

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

上述给定语句将返回select选项，然后将返回结果放入如下所示：

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

这将返回属性值。
不工作，obj=undefined。我使用标记顺便说一句。未捕获类型错误：无法访问属性0，obj未定义您是我的英雄！我通过执行var obj=$（$）（“#您的选择输入id”）.select2（）.find（“：selected”）[0]），将其简化了一点。但无论哪种方式都可以100%：），我讨厌他们如何设置它。$（“#示例”）.select2（'data'）[0]。元素。属性['data-name']。值它对我有用。
var name_of_attribute = $( return_option ).attr('name-of-attribute');