Nhận các giá trị thuộc tính từ select2 tùy chọn được chọn

Question

Tôi đang sử dụng plugin Select2 từ http://ivaynberg.github.io/select2/select2-latest.html những gì hoạt động tốt nhưng tôi gặp sự cố để nhận các giá trị từ các thuộc tính tùy chọn.

Tôi đã có một lựa chọn thực đơn như thế này:

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

Làm thế nào tôi có thể nhận được các giá trị của các thuộc tính 'dữ liệu có giá trị', 'dữ liệu tên' và 'giá trị' của các tùy chọn đã chọn?

Answer 1

Không ý tưởng về các pluggin, và không có kiểm tra nếu mã làm việc tôi tưởng tượng nó sẽ là một cái gì đó như thế này:

$('.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 2

Đặt Select2 vào chế độ gắn thẻ, nó sẽ giúp bạn. Hoặc Hãy thử bên dưới mã tương tự, nó có thể làm việc cho bạn ...

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

Answer 3

tôi biết rằng đây là một bài cũ, nhưng tôi đã phải vật lộn với vấn đề tương tự. Đây là giải pháp mà tôi và người bạn tốt của tôi Thys cuối cùng đã làm việc:

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

này làm việc theo quan điểm của MVC 4 của tôi với dòng cuối cùng ở dạng html anh nơi mà nó được bổ sung một cách chính xác cho mô hình. Đừng quên up-bỏ phiếu nếu bạn sử dụng câu trả lời của tôi xin vui lòng :) Tôi đã không có nhiều của một danh tiếng ...

Answer 4

này được trả lời trong another SO question

Không có phương pháp trực tiếp với Select2 , bạn có thể sử dụng kết hợp dữ liệu select2 và jQuery:

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

Trước tiên, bạn nhận được dữ liệu select2 sau đó bạn tìm thấy tùy chọn đã chọn với jQuery và cuối cùng là thuộc tính data.

Answer 5

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

Answer 6

Tôi hy vọng bạn đã giải quyết được vấn đề. Ở đây chúng ta không sử dụng select2(), nếu chúng ta sử dụng select2() nó sẽ không làm việc tất cả các chức năng khác như formatNoMatches, on-change....

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

Answer 7

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

trong obj biến tôi sẽ nhận được tất cả các data của selected node.

Answer 8

Đối tượng được chọn params.data.element của mục đã chọn giữ dữ liệu bạn đang tìm kiếm.

đâu .foo là yếu tố lựa chọn Tôi đang gọi điện thoại, và các thuộc tính dữ liệu trong các tùy chọn tôi muốn truy cập là data-bar="some value" Các công trình sau đây cho tôi:

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

Answer 9

Chúng ta có thể sử dụng một sự kết hợp của Select2 dữ liệu và jQuery:

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

Answer 10

Làm việc sau đây cho tôi. Ý tưởng là sử dụng chức năng "thay đổi" như sau

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