select2-如果多个选项共享一个值，则返回不正确的所选选项

Question

I have a select element with multiple optgroups, where it is possible for options in different optgroups to have the same value. For example (see the 'Apple' and 'Potato' options):

<select data-placeholder="Fruit/Veg" id="food_select">
  <option value=""></option>

  <optgroup label="Fruits">
    <option data-params="{'selected_type':'Fruit'}" value="1">Apple</option>
    <option data-params="{'selected_type':'Fruit'}" value="2">Pear</option>
    <option data-params="{'selected_type':'Fruit'}" value="3">Banana</option>
  </optgroup>

  <optgroup label="Veg">
    <option data-params="{'selected_type':'Veg'}" value="1">Potato</option>
    <option data-params="{'selected_type':'Veg'}" value="4">Cabbage</option>
    <option data-params="{'selected_type':'Veg'}" value="5">Bean</option>
  </optgroup>
</select>

With a plain select, attempting to find the selected option with jQuery yields the correct result. $('#food_select').find(:selected)

However, when select2 is applied, and 'Potato' is selected, $('#food_select').find(:selected) returns the 'Apple' option, which is the first option with the value of '1'.

All other selected options work correctly, so it seems select2 is not handling the duplicate values correctly. I've created a JSFiddle demonstrating this behaviour, at: http://jsfiddle.net/e57m9cax/ .

Is there a workaround or fix for this behaviour?

I could split this into two separate select elements, but would rather not for UX reasons. Any direction would be appreciated.

Thanks.

Answer 1

From Kevin Brown, a collaborator on select2:

This is a known issue and because of how the internals are structured for 3.5, it cannot be fixed in the 3.x released.

Luckily it's fixed in 4.0, which will be entering into the first beta shortly

So the solution to this is to use separate selects until the release of select2 4.0.