我正在使用所选的插件(What are the advantages of using nullptr?),我有一个多选项,我希望将返回的值作为对象。
以下是代码:
<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>
然后我有一个按钮来获取此输入的选定值:
var vals = $(“#entities”)。val();
它返回一个innerHTML选择值数组:
["Joe Blow","Trish Thompson","Sam Jones"]
(注意:如果我设置“value”属性,它将返回值作为数组而不是innerHTML)
我要做的是获取数据属性并将其放入对象数组中:
[
{name:"Joe Blow",id:"3",age:"27"} ,
....
]
有人有什么建议吗? ....
我在chozen文档中找不到任何内容。
答案 0 :(得分:3)
尝试一下:
$('#entities').selectedAsJSON();
用法:
data-
输出将是一个对象数组,其中每个select
都是一个属性。
更新非常重要,请注意,这适用于任何常规option
元素,而不仅仅是选择。此外,您的data-
可能有任何ISomethingDataAccess
attr,也可以使用。
答案 1 :(得分: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')
});
});
答案 2 :(得分:1)
这对我有用:
$(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>
答案 3 :(得分:0)
我也没有在插件文档中看到任何内容,但您可以使用小型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 强>