Как получить значение данных из окна выбора с помощью selectize js

Question

Я могу загрузить параметры в поле selectize js select. Но как я могу получить от него данные? Например:

$('#product_id').append('<option data-no_of_reams="'+data[i].no_of_reams+'" value="'+data[i].id+'">'+data[i].c_code+'</option>'); 

я получаю значение из него, но не может получить данные из data-no_of_reams="'+data[i].no_of_reams+'". Помогите мне найти данные data-no_of_reams

Полный код здесь

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

}

Заранее благодарен

Answer 1

U se getAttribute('data-whatever') если только javascript.

Используйте .data('whatever') при использовании jquery.

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

Answer 2

Проблема с selectize является то, что при создании выпадающего плагина копирует исходные выбора параметров с их значениями и лейбл, но, видимо, он игнорирует все другие атрибуты, в том числе data-* из них. После инициализации плагина в основном нет атрибутов данных, поэтому вы не можете прочитать выбранную опцию no_of_reams.

Обходной путь, с которым я пришел, заключается в том, чтобы хранить объект данных во внутренних данных элемента выбора, чтобы вы могли получить к нему доступ позже. Это будет работать:

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

Это очень удобно: теперь OnChange обратного вызова у вас есть все selectedObj, так что вам даже не нужны данные-атрибуты больше.

Вот демо: http://plnkr.co/edit/pYMdrC8TqOUglNsXFR2v?p=preview

Answer 3

Вы можете легко сделать это с помощью новой версии data-data в option. Вы можете создать тег option либо статически, либо программно (используя $.ajax).

Хитрость заключается в использовании this.options в рамках выбора для доступа к исходным параметрам, из которых был выбран элемент управления выбора.

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

Кроме того, если вы используете 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> 

И, согласно документации selectize, при использовании render и valueField, вы перезаписывая значение по умолчанию <option value="val">name</option>, так что они вытаскиваются из data-data вместо автоматического задания из фактического значения на <option>.Вы можете увидеть это, потому что даже если <option> текст Большие надежды Книга, это будет на самом деле просто отобразить name поле из data-data - в этом случае только Большие надежды

Answer 4

С этой версии вы не должны изменить ваш HTML. Работает с 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({ 
 
\t \t onInitialize: function(){ 
 
\t \t \t var s = this; 
 
\t \t \t this.revertSettings.$children.each(function(){ 
 
\t \t \t \t $.extend(s.options[this.value], $(this).data()); 
 
\t \t \t }); 
 
\t \t } \t  
 
}); 
 

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