Selectize is removing optgroup options

Viewed 23

I am using selectize (a select2.js alternative). When I am running selectize on my field with 2 optgroups, one of the optgroups disappears \(〇_o)/

This is the HTML of the select field: enter image description here

This is how it looks in view source: enter image description here

It seems like the quotation symbol is causing it trouble because if I remove that value from the array before printing the values, the optgroup that disappears now appears. I do need however to have these symbols.

This is the PHP code that generates that HTML:

<select name="output_selected_columns[]" id="output_selected_columns" class="selectize" multiple="multiple">
    <optgroup label="<?php echo sprintf( __( 'Columns of %s', 'excellico' ), $file1 ); ?>">
        <?php
        foreach( $Excellico_Files->get_file_left_header() as $key => $value ) {
            ?>
            <option value="<?php echo esc_html( $value ); ?>"><?php echo esc_html( $value ); ?></option>
            <?php
        }
        ?>
    </optgroup>
    
    <optgroup label="<?php echo sprintf( __( 'Columns of %s', 'excellico' ), $file2 ); ?>">
        <?php
        foreach( $Excellico_Files->get_file_right_header() as $key => $value ) {
            ?>
            <option value="<?php echo esc_html( $value ); ?>"><?php echo esc_html( $value ); ?></option>
            <?php
        }
        ?>
    </optgroup>
</select>

This is how it looks: (missing File 1 optgroup)
enter image description here

I also tried to add diacritics: true to the selectize options object, didn't help.

Any help is appreciated! Thanks!

What should I do?

1 Answers

The html output you provided is correct as can be seen.

<select name="output_selected_columns[]" id="output_selected_columns" class="selectize" multiple="multiple">
  <optgroup label="File 1">
    <option value="מוצר">מוצר</option>
    <option value="הזמנה">הזמנה</option>
    <option value="ת&quot;ז">ת"ז</option>
    <option value="שם מנוי">שם מנוי</option>
  </optgroup>

  <optgroup label="File 2">
    <option value="מוצר">מוצר</option>
    <option value="הזמנה">הזמנה</option>
    <option value="ת&quot;ז">ת"ז</option>
    <option value="שם מנוי">שם מנוי</option>
    <option value="סטטוס תגמול">סטטוס תגמול</option>
  </optgroup>
</select>

However it doesn't look it is generated by the php code you provided. Since that contains ' and your html contains "

Try any of the following hopefully it will work

<option value="<?php echo esc_html( $value ); ?>"><?php echo esc_html( $value ); ?></option>
<option value="<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $value ); ?></option>                
Related