Fix issue in IE for option values with dashes #61

Merged
merged 1 commit into from Apr 19, 2017

Projects

None yet

2 participants

Contributor

Currently, there are issues with option lists that have dashes/hyphens in values and IE browsers (11 and Edge).

<div class="form-group">
      <select id="special-select" class="form-control">
        <option value="one">One</option>
        <option value="two-three">Two-three</option>
        <option value="4-5">4-5</option>
        <option value="four">Four</option>
        <option value="five">Five</option>
    </select>
</div>

When using IE browsers (at least), option "4-5" will not correctly select/save to the hidden form input. and is unable to be set on the underlying select element.

JSBin showing issue (view in IE 11 or Edge and select through the elements)
http://jsbin.com/guvilotoxa/edit?html,js,console,output

This is due to the way the dropdown is constructed. It reads all the options above, then takes the contents of "value" and sets each <li> "value" to the same. This is incorrect per the HTML spec as noted in some easier to read spots:
https://developer.mozilla.org/uk/docs/Web/HTML/Element/li

This integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).

https://www.w3schools.com/tags/att_li_value.asp

The value must be a number and can only be used in ordered lists (<ol>).

These indicate that value must be a number and should only be set for ol, which this plugin is not generating. I'm proposing here that instead a conversion be made to use data-value, which is safe to use for all values in all browsers.

What appears to happen in IE is that when setting .attr("value"), it will sometimes truncate if the values are numeric and with other values that contain special characters may just not set at all. This patch fixes this issue and improves compatibility with the HTML spec.

@FezVrasta FezVrasta merged commit 696bb9e into FezVrasta:master Apr 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment