How to get data attributes and values as object in select options (using selected plugin)
I am using the plugin of choice ( here ) and I have a multiple choice where I want to get the values returned as an object.
Here is the code:
<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>
Then I have a button to get the selected values of that input as:
var vals = $ ("# entities"). val ();
And it returns an array from innerHTML of the selected values as:
["Joe Blow","Trish Thompson","Sam Jones"]
(Note: if I set the attribute to "value", it will return the values as an array, not innerHTML)
What I am trying to do is take the data attributes and put them in an array of objects like:
[
{name:"Joe Blow",id:"3",age:"27"} ,
....
]
Does anyone have any suggestions? ....
I couldn't find anything in the chozen documentation.
source to share
Try:
jQuery.fn.extend({
selectedAsJSON: function(){
var result = [];
$('option:selected', this).each(function(){
result.push($(this).data());
})
return result;
}
});
Using:
$('#entities').selectedAsJSON();
The output will be an array of objects, where each data-
will be a property.
Update: It's important to note that this will work with any regular item select
, not just the selected one. Also, yours option
can have any data-
attr, will work as well.
source to share
Using $. val () , you will only get input / select values, try with : selected Selector to get all items. My working sample:
https://jsfiddle.net/rj8j5v0j/
The code you must implement:
// 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')
});
});
source to share
This works for me:
$(document).on( 'change' , ‘.myselect’ , function() {
console.log( $('.myselect option:selected').data(‘value’) );
});
Basically, I got the selected option in the original <select>
and then got the data attribute of that element. Chosen gives you the cloned version <select>
, so you need to get the original link by asking for the selector twice.
$('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>
source to share
I don't see anything in the plugin documentation, but you can use a little jQuery function to achieve what you need:
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)));
});
source to share