Как получить атрибуты данных и значения в качестве объекта в опциях выбора (с помощью выбранного плагина)

Question

Я использую выбранный плагин (here), и у меня есть множественный выбор, где я хочу получить значения, возвращаемые как объекты.

Вот код:

<select class="chozen" id="entities" multiple> 

    <option data-name="Joe Blow" data-id="3" data-age="27">Joe Blow</option> 
    <option data-name="Trish Thompson" data-id="4" data-age="21">Trish Thompson </option> 
    <option data-name="Sam Jones" data-id="5" data-age="43">Sam Jones</option> 

</select> 

Я тогда кнопку, чтобы получить выбранные значения этого входа как:

вар Vals = $ ("# сущностей") Вал();.

И это возвращает массив innerHTML выбранных значений как:

["Joe Blow","Trish Thompson","Sam Jones"] 

(Примечание: если установить «значение» атрибута, он будет возвращать значения как массив, а не innerHTML)

То, что я пытаюсь сделать, это атрибуты данных и поместить это в массив объектов, как:

[ 
    {name:"Joe Blow",id:"3",age:"27"} , 
    .... 
] 

кто-нибудь есть какие-либо предложения? ....

Я не мог найти что-либо в документации chosen.

Answer 1

Дайте этому попытку:

jQuery.fn.extend({ 
     selectedAsJSON: function(){ 
      var result = []; 
      $('option:selected', this).each(function(){ 
       result.push($(this).data()); 
      }) 
      return result; 
     } 
    }); 

Использование:

$('#entities').selectedAsJSON(); 

Вывод будет массив объектов, где каждый data- будет собственностью.

Update: Важно отметить, что это будет работать с любым регулярным select элементом, а не только с выбрали. Кроме того, ваш option может иметь любой data- attr, также будет работать.

Answer 2

Используя $.val(), вы получите только значения ввода/выбора, попробуйте с помощью переключателя :selected, чтобы получить все элементы. Мой рабочий пример:

https://jsfiddle.net/rj8j5v0j/

код, который вы реализовать:

// build an array 
var data = []; 
$("#entities option:selected").map(function(){ 
    // push each selected option as an object with name, id and age 
    data.push({ 
     name: $(this).data('name'), 
     id: $(this).data('id'), 
     age: $(this).data('age') 
    }); 
}); 

Answer 3

Я не вижу ничего в плагине документации либо, но вы можете использовать небольшую функцию JQuery, чтобы добиться того, что вам нужно:

function returnSelectAsArray($object){  
    var dataArray = [], 
     $selectedOptions = $object.find('option').filter(':selected'), 
     $option; 

    $selectedOptions.each(function(){   
     $option = $(this); 
     dataArray.push({ 
      name: $option.attr('data-name'), 
      id: $option.attr('data-id'), 
      age: $option.attr('data-age'), 
     }); 
    }); 
    return dataArray; 
} 

$('#entities').on('change chosen:change', function(){  
    console.log(returnSelectAsArray($(this))); 
}); 

JSFiddle

Answer 4

Это работает для меня:

$(document).on('change' , ‘.myselect’ , function() { 
    console.log($('.myselect option:selected').data(‘value’)); 
}); 

В принципе, я получил выбранный вариант в оригинальном <select>, а затем я получил данные-атрибут этого элемента.Chosen дает вам клонированную версию <select>, поэтому вам нужно получить исходную ссылку, запросив селектор дважды.

$('select').chosen(); 
 

 
$(document).on('change', '#mySelect', function(e) { 
 
    var r = $('#mySelect option:selected').data('customF'); 
 
    $("#result").html(r); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.min.css" rel="stylesheet" /> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"></script> 
 

 
<div class="col-md-12"> 
 
    <select class="form-control" id="mySelect"> 
 
    <option value="value1" data-custom-f="Cool">Option 1</option> 
 
    <option value="value2" data-custom-f="Awesome">Option 2</option> 
 
    </select> 
 
    <div id="result"></div> 
 
</div>

View on JSFiddle