How to to get multiple selected options with jQuery or js without using the Ctrl Key, in IE11

Question

I need help please with IE 11 and jQuery in getting the selected options. (It works fine in Edge.) I've tried many links here and elsewhere but without success.

UPDATE If I remove the function .mousedown, then the onchange function works as expected. so the question then is how to accumulate all the selections (without using the Ctrl Key) before posting those back via ajax.

It also does not display the checkboxes in IE11, but that's a different question. Thanks in Advance.

Markup:

<style>
    option:before {
    content: "☐ "
}

option:checked:before {
    content: "☑ "
}

<select class="ddlRole" id="ddlRole" style="width:810px" size="6" multiple="">
    <option value="1">Administrator</option>
    <option value="2">Manager</option>
    <option value="3">User</option>
    <option value="8">new role test 5</option>
</select>

The jQuery: This mousedown function allows the user to select multiple options from the list

$("#ddlRole").mousedown(function (e)
    {
        e.preventDefault();

        var select = this;
        var scroll = select.scrollTop;

        e.target.selected = !e.target.selected;

        setTimeout(function () { select.scrollTop = scroll; }, 0);

        $(select).focus();

        $("#ddlRole").trigger("change");

    }).mousemove(function (e) { e.preventDefault() });


    $('#ddlRole').on('change', function ()
    {
        // Works in Edge but not IE11
        var selectedValue = $("#ddlRole").find('option:selected').val();

        alert("try  .." + selectedValue);
    });

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

When we using F12 developer tools to check the Html and CSS style, we can see that the content is unavailable.

It seems that if the CSS content style not working in the select element in the IE browser.

As a workaround, I suggest you could change the select elements to CheckBox list. Then, attach the checkbox list container mousedown function and the checkbox change event.

Besides, you could also try to use BootStrap multiple selected plugin to add checkbox in the select option. Like the sample in this thread

How to to get multiple selected options with jQuery or js without using the Ctrl Key, in IE11

1 Answers1