web-dev-qa-db-ja.com

select2の選択されたオプションから属性値を取得する

私は次のSelect2プラグインを使用しています http://ivaynberg.github.io/select2/select2-latest.html 正常に機能しますが、オプション属性から値を取得するのに問題があります。

私はこのような選択メニューを持っています：

<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」の値を取得するにはどうすればよいですか？

javascriptjqueryhtmljquery-select2
7
Leon van der Veen
obj = $("#dropdown").select2("data")

obj変数で、selected nodeのすべてのdataを取得します。

12
utkarsh

これは 別のSO質問

Select2には直接的な方法はありません。select2データとjQueryの組み合わせを使用できます。

$（ "＃example"）。select2（）。find（ "：selected"）。data（ "id"）;

最初にselect2データを取得し、次にjQueryで選択したオプションを見つけ、最後にdata-attributeを見つけます。

5
pymarco

Select2データとjQueryを組み合わせて使用​​できます。

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

以下は私のために働いた。アイデアは次のように「変更」機能を使用することです

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

プラグインについてはわかりません。コードが機能するかどうかを確認しないと、次のようになると思います。

$('.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?
});
0
Jamie Hutber
el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value
0
Vishal Kumar

問題が解決したことを願っています。ここでは、select2()を使用しません。select2()を使用すると、formatNoMatches, on-change....のような他のすべての関数が機能しなくなります。

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

これが古い投稿であることは知っていますが、私はこれと同じ問題に苦しんでいました。これは私と私の親友である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フォームの最後の行がモデルに正しく追加されています。私の答えを使用する場合は、賛成票を投じることを忘れないでください:)私はあまり評判がありません...

0
abiNerd

選択したアイテムのparams.data.elementオブジェクトは、探しているデータを保持します。

ここで、.fooは呼び出している選択要素であり、アクセスしたいオプション内のデータ属性はdata-bar="some value"です。以下は私にとって有効です。

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

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"));
    });
0
patriciabravos

select要素のIDを設定すると、これは機能します

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

Select2をタグ付けモードにすると、役に立ちます。または、以下の同様のコードを試してください、それはあなたのために働くかもしれません...

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