javascript - 如何使用selectize js从选择框中获取数据值

Question

我可以将选项加载到 selectize js 选择框。但是我怎样才能从中获取数据值呢？例如:

$('#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+'". 中获取数据 帮我找到 的数据数据-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

您可以使用 data-data 在新版本中轻松执行此操作在 option 内.您可以创建 option静态或编程方式标记(使用 $.ajax )。

诀窍是使用 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>

此外，如果您使用 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> text 是 Great Expectations Book，它实际上只会显示 name来自 data-data 的字段- 在这种情况下只是 Great Expectations