Показать optgroup в выбранных значениях в selctize.js

Question

У нас есть поле выбора, в котором можно выбрать несколько значений. Эти значения сгруппированы в optgroups. Чтобы облегчить понимание, некоторые значения могут быть в нескольких optgroups, мы хотели бы видеть имя optgroup в метках для выбранных полей. Как мы можем сделать это?

См. Следующую скрипку: если вы выбираете "Первый элемент", вы не знаете, какой из них был выбран, "Магазин" или "Склад".

Спасибо!

https://jsfiddle.net/4t8fjj7g/1/

HTML:

<select name="test" id="test-select" multiple="multiple">
  <optgroup label="Store">
    <option data-type="stores" value="1">First item</option>
    <option data-type="stores" value="2">Second item</option>
  </optgroup>
  <optgroup label="Warehouse">
    <option data-type="warehouses" value="3">First item</option>
    <option data-type="warehouses" value="4">Second item</option>
  </optgroup>
</select>

И это код JavaScript:

$('select#test-select').selectize({
  searchField: ['text', 'type']
});

Answer 1

По сути, то, что предложил Даффи, НО... Вы можете использовать пользовательские функции рендеринга для выпадающих опций и для выбранных элементов:

$('select#test-select').selectize({
  searchField: ['text', 'type'],
  render: {
    item: itemRenderFunction,
    option: optionRenderFunction
  }
});

Это позволит вам избежать умножения меток в списке выбранных элементов.

Answer 2

Что я сделал, так это то, что значения имеют optgroup, а затем значение вроде optgroup_value затем, когда форма отправляется на сервер или выполняется что-то в JS, я могу получить ее, взорвав строку, например:

<select multiple class="my-select">
    <optgroup label="taxes">
        <?php foreach ( $taxes as $tax) : ?>
            <option value="tax_<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></option>
        <?php endforeach; ?>
    </optgroup>
    <optgroup label="Version">
        <?php foreach ( $my_versions as $version ) : ?>
            <option value="version_<?php echo $version->slug; ?>"><?php echo $version->name; ?></option>
        <?php endforeach; ?>
    </optgroup>
    <optgroup label="Language">
        <?php foreach ( $my_languages as $language ) : ?>
            <option value="language_<?php echo $language->slug; ?>"><?php echo $language->name; ?></option>
        <?php endforeach; ?>
    </optgroup>
</select>

тогда

<?php
foreach ( $_POST['taxes'] as $val ) {
    if ( ! empty( $val ) ) {
        // $val_parts is an array with
        // $val_parts[0] = optgroup only
        // $val_parts[1] = the value of the option minus optgroup
        $val_parts = explode( "_", $val );

        // My use case to add a meta_query to a WP_Query so add filter based on both values
        $meta_arg = array(
            'taxonomy' => "my_" . $val_parts[0], // custom prefix then optgroup
            'field'    => 'slug',
            'terms'    => $val_parts[1] // value
        );

        // Add to running array and possibly do again
        array_push( $args['tax_query'], $meta_arg );
    }
}