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

Posted

技术标签:

【中文标题】从 select2 选择的选项中获取属性值【英文标题】:Get attributes values from select2 selected option 【发布时间】:2013-10-09 22:04:14 【问题描述】:

我使用的是从http://ivaynberg.github.io/select2/select2-latest.html中选择二插件什么工作正常,但我有一个问题,从选项属性获取值。 P>

我有一个选择菜单是这样的: P>

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

我怎样才能获得的属性“数据值”,“数据名”和所选择的选项的“价值”? P>的值

【问题讨论】:

【参考方案1】:
obj = $("#dropdown").select2("data")

obj 变量中,我将获得selected node 的所有data

【讨论】:

不工作,obj = 未定义。顺便说一句,我正在使用标签。【参考方案2】:

这是在another SO question回答的

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

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

首先您获得 select2 数据,然后您使用 jQuery 找到您选择的选项,最后是数据属性。

【讨论】:

【参考方案3】:

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

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

【讨论】:

$("#example").select2('data')[0].element.attributes['data-name'].value 它对我有用。【参考方案4】:

以下对我有用。想法是使用“更改”功能如下

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

【讨论】:

Uncaught TypeError: can't access property 0, obj is undefined【参考方案5】:
var return_option = $("#your-select-input-id").select2().find(":selected")[0];    

上面给出的语句将返回选择选项,然后将返回结果如下所示:

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

这将返回属性值。

【讨论】:

您先生,是我的英雄!我通过做 var obj = $($("#your-select-input-id").select2().find(":selected")[0]); 简化了一点。但无论哪种方式都 100% 有效 :),我讨厌他们是如何设置的。【参考方案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?
);

【讨论】:

【参考方案7】:

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

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

【讨论】:

【参考方案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 表单的最后一行中,它被正确添加到模型中。如果您使用我的答案,请不要忘记投票 :) 我没有什么名声...

【讨论】:

【参考方案9】:

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

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

【讨论】:

【参考方案10】:
el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value

【讨论】:

【参考方案11】:

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

.foo 是我正在调用的选择元素,我要访问的选项中的数据属性是 data-bar="some value" 以下对我有用:

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

【讨论】:

【参考方案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"));
    );

【讨论】:

【参考方案13】:

为您的选择元素设置一个 id,这样就可以了

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

【讨论】:

【参考方案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 选择的选项中获取属性值的主要内容,如果未能解决你的问题,请参考以下文章

Select2 按选项值自动完成

Vue Js没有在select2中获取选择选项值

选择和取消选择时从选择框中获取值

如何在多选选项中获取选定选项数据属性

jQuery select2设置默认值从列表中的一个选项吗

从 select2 列表中删除旧的选定值