JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<div>
    <select multiple="multiple" size="10">
        <option>Option 1</option>
        <option disabled="disabled">Option 2</option>
        <option selected="selected">Option 3</option>
        <option disabled="disabled">Option 4</option>
        <option>Option 5</option>
        <option disabled="disabled" selected="selected">Option 6</option>
        <option selected="selected">Option 7</option>
        <option>Option 8</option>
        <option disabled="disabled" selected="selected">Option 9</option>
        <option disabled="disabled" selected="selected">Option 10</option>
    </select>
</div>
<div>
    <label>Selected/Disabled Options:</label>
    <ul>
        <li>Option 6</li>
        <li>Option 9</li>
        <li>Option 10</li>
    </ul>
</div>
<div>
    <p>When you click on an enabled option, such as Option 1, and drag down the list, 'Option 6', 'Option 9' and 'Option 10' should remain selected. When you click and drag, since the last two options are disabled, it's deselecting them but not reselecting them again.</p>
    <p>Note: this does not happen is you release the mouse click over an enabled option, such as clicking 'Option 1' and dragging to 'Option 8' and release the mouse click while the pointer is over 'Option 8'. Release the mouse click anywhere outside the select control or while the pointer is over a disabled option and it does not work correctly.</p>
    <p>The mouseup event technically does what it should. For example, click any enabled option and 'Option 6', 'Option 9' and 'Option 10' should remain selected.</p>
</div>

CSS

select { width: 125px; padding: 2px; }
div { float: left; margin: 15px 15px; }
option:selected
option:after {
    background-color: blue;
}

JavaScript

var selOpts = $('option:selected');

$(document).ready(function() {
    $('option').mouseup(function(e) {
        selOpts.each(function() {
            if ($(this).attr('disabled') == 'disabled'
                    && $(this).attr('selected') == 'selected') {
                $(this).attr('selected', 'selected');
            }
        });
    });
});