[英]How to get the data value from a select box using selectize js
I am able load the options to a selectize js select box. 我可以将选项加载到selectize js选择框中。 But how can I get the data-value from it?
但是如何从中获取数据值呢? For example:
例如:
$('#product_id').append('<option data-no_of_reams="'+data[i].no_of_reams+'" value="'+data[i].id+'">'+data[i].c_code+'</option>');
I get the the value from it but unable to get the data from data-no_of_reams="'+data[i].no_of_reams+'".
我从中获取了值,但是无法从
data-no_of_reams="'+data[i].no_of_reams+'".
Help me to find the data of data-no_of_reams
帮我找到
data-no_of_reams
的data-no_of_reams
The full code here 完整的代码在这里
function getAllCCode(){
$.ajax({
url: '/inward/allccode/',
type: 'GET',
datatype: 'JSON',
success: function(data){
$('#product_id').append('<option value="">Select</option>');
for (var i in data){
$('#product_id').append('<option data-size="'+data[i].size_h+'X'+data[i].size_w+'" data-radius="'+data[i].radius+'" data-type="'+get_type(data[i].type)+'" data-meal="'+get_mill(data[i].mill)+'" data-variety="'+get_code(data[i].variety)+'" data-ream_weight="'+data[i].ream_weight+'" data-no_of_reams="'+data[i].no_of_reams+'" value="'+data[i].id+'">'+data[i].c_code+'</option>');
}
}
}).done(function() {
$('#product_id').selectize({
onChange : function(){
alert('hello');
}
});
});
} }
Thanks in advance 提前致谢
You can easily do this with the new version using data-data
within the option
. 您可以使用
option
data-data
对新版本轻松进行此操作。 You can create the option
tag either statically or programmatically (using $.ajax
). 您可以静态或以编程方式(使用
$.ajax
)创建option
标签。
The trick is to use the this.options
within selectize to access the original options that the selectize control was built from. 诀窍是使用
this.options
selectize内访问该selectize控制权从原建选项。
<select name="product_id" id="product_id">
<option value="123" data-data="{id:'123',no_of_reams:'1212',name:'Great Expectations'}">Great Expectations Book</option>
<option value="987" data-data="{id:'987',no_of_reams:'7766',name:'Great Gatsby'}">Great Gatsby Book</option>
</select>
<script>
$('#product_id').selectize({
valueField: 'id',
labelField: 'name',
render: {
item: function(item, escape) {
return '<div>' +
'<div class="title">' + escape(item.name ? item.name : 'no title') + '</div>' +
'<div class="description">' + escape(item.description ? item.description : 'no description') + '</div>' +
'</div>';
},
option: function(item, escape) {
return '<div>' +
'<div class="title">' + escape(item.name ? item.name : 'no title') + '</div>' +
'<div class="description">' + escape(item.description ? item.description : 'no description') + '</div>' +
'</div>';
}
},
onChange: function(val) {
var data = this.options[val]; // <-- This is how to pull data-data from the original options
console.log(data); // stores the data-data as a json object
alert(data.no_of_reams);
}
});
</script>
Also, if you are using PHP to do the markup, make sure you use htmlentities like so: 另外,如果您使用PHP进行标记,请确保使用如下所示的htmlentities:
<select name="product_id" id="product_id">
<option value="123" data-data="<?php echo htmlentities(json_encode(array('id' => 123, 'no_of_reams' => 1212, 'name' => 'Great Expectations'))) ?>">Great Expectations Book</option>
<option value="987" data-data="<?php echo htmlentities(json_encode(array('id' => 987, 'no_of_reams' => 7766, 'name' => 'Great Gatsby'))) ?>">Great Gatsby Book</option>
</select>
And, per the selectize documentation, when you use render
and valueField
, you are overwriting the default <option value="val">name</option>
, so those are pulled from the data-data
instead of being auto-set from the actual value on the <option>
. 而且,根据selectize文档,当您使用
render
和valueField
,您将覆盖默认的<option value="val">name</option>
,因此将从data-data
中提取这些内容,而不是从data-data
中自动设置这些内容。 <option>
上的实际值。 You can see this because even though the <option>
text is Great Expectations Book , it will actually just display the name
field from data-data
- in this case just Great Expectations 您可以看到此内容,因为即使
<option>
文本是“ Great Expectations Book” ,它实际上只会显示data-data
的name
字段-在这种情况下,只是“ Great Expectations”
The problem with selectize is that when building combobox plugin copies initial select options with their values and labels, but apparently it ignores all other attributes, including data-*
ones. selectize的问题在于,在构建组合框插件时会复制初始选择选项及其值和标签,但显然会忽略所有其他属性,包括
data-*
属性。 After plugin is initializes there are basically no data- attributes anymore, so you can't read selected option no_of_reams
. 插件初始化后,基本上不再具有data-attribute的属性,因此您无法读取选择的选项
no_of_reams
。
The workaround I came with is to store data object in select element internal data so you can access it later. 我附带的解决方法是将数据对象存储在select元素内部数据中,以便以后可以访问它。 This will work:
这将起作用:
$.ajax({
url: '/inward/allccode/',
type: 'GET',
datatype: 'JSON',
success: function(data) {
$('#product_id').append('<option value="">Select</option>').data('data', data);
for (var i in data) {
$('#product_id').append('<option value="' + data[i].id + '">' + data[i].c_code + '</option>');
}
}
}).done(function() {
$('#product_id').selectize({
onChange: function(value) {
var selectedObj = this.$input.data('data').filter(function(el) {
return el.id === Number(value);
})[0];
alert(selectedObj.no_of_reams)
}
});
});
It's pretty convenient: now in onChange callback you have entire selectedObj
, so you don't even need data-attributes anymore. 这非常方便:现在在onChange回调中,您已经具有整个
selectedObj
,因此您甚至不再需要数据属性。
Here is a demo : http://plnkr.co/edit/pYMdrC8TqOUglNsXFR2v?p=preview 这是一个演示 : http : //plnkr.co/edit/pYMdrC8TqOUglNsXFR2v?p=preview
With this version you won't have to change your HTML. 使用此版本,您无需更改HTML。 Works with jQuery .data() as well
也可以使用jQuery .data()
// assuming HTML that looks like: // <select id='mySelect'> // <option val='123' data-myparam='ONE'>My Option 1</option> // <option val='123' data-myparam='TWO'>My Option 2</option> // </select> $(document).ready( function(){ // keep .data (selectize ver 0.12.4 bug / library deletes .data by default) $('#mySelect').selectize({ onInitialize: function(){ var s = this; this.revertSettings.$children.each( function(){ $.extend(s.options[this.value], $(this).data()); }); } }); // Then to read back in: $('#mySelect').on('change', function(){ var s = $('#mySelect')[0].selectize; //get select var data = s.options[s.items[0]]; //get current data() for the active option. alert('your data is: ' + data.myparam); }); })
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script> <select id='mySelect'> <option val='123' data-myparam='ONE'>My Option 1</option> <option val='123' data-myparam='TWO'>My Option 2</option> </select>
Use getAttribute('data-whatever')
if only javascript. 如果仅使用javascript,请使用
getAttribute('data-whatever')
。
Use .data('whatever')
if using jquery. 如果使用jquery,请使用
.data('whatever')
。
$(document).ready(function() { var reamsArr = ['34', '44', '55']; $.each(reamsArr, function(index, val) { $('#product_id').append("<option value=" + val + " data-no_of_reams=" + val + ">" + val + "</option>"); }) $("#product_id").on("change", function() { alert($("#product_id option:selected").data("no_of_reams")); }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="product_id"></select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.