Multiple selection does not work in IE

Question

I made a post on how with a choice, select all the items. I received a reply, which solved. well, solved only in Chrome, but in IE does not work. As the question changed the "direction", so I decided to do another post. Includes other versions of jquery and it still didn’t work. This is the code of my select(html).

<tr>
                                <td width="10%" class="label_right">Autorização Prévia: &nbsp;</td>
                                <td class="label_left">
                                    <select id="ddl_autorizacaoprevia" multiple="multiple" >
                                        <option value="0">TODAS AS AUTORIZAÇÕES</option>
                                        <option value="T">TÉCNICA / ADMINISTRATIVA</option>
                                        <option value="A">SISTÊMICA</option>
                                        <option value="N">NÃO PRECISA</option>
                                    </select>
                                </td>
                            </tr>

This is the jquery that selects all items in a single click:

$('#ddl_autorizacaoprevia option').click(function () {

                var that = $(this);
                if (that.val() == 0) {
                    $('#ddl_autorizacaoprevia option').each(function () {
                        $(this).attr('selected', 'selected');
                    });
                } else {
                    $('#ddl_autorizacaoprevia option').each(function () {
                        $(that).removeAttr('selected');
                    });
                    $(that).attr('selected', 'selected');
                }
            });

So, this code works well in Chrome, but it doesn’t work in IE. What can it be? Only works with Ctrl+Click, then I can select all, but only by clicking the first index(index = 0), there not selects all items, but in Chrome works and the browser approved by the company is IE and not Chrome, so I have to make it work in IE.

Answer 1

Hello,

I guess I didn’t need all this, test it with this code:

$('#ddl_autorizacaoprevia option:first-child').click(function () {
    $('#ddl_autorizacaoprevia option').each(function () {
         $(this).attr('selected', 'selected');
    });
});

See this example here: https://jsfiddle.net/1vwb5nxp/

EDIT

I made an implementation in pure javascript to see if it solves your problem, follow the code:

function qs(q) {
   return document.querySelector(q);
}
function qsa(q) {
   return document.querySelectorAll(q);
}
qs("#ddl_autorizacaoprevia option:first-child").onclick = function (ev) {
    var todos = qsa('#ddl_autorizacaoprevia option');
    Array.prototype.slice.call(todos).forEach(function (e) {
        e.setAttribute('selected', 'selected');
    });
}   

Code example: https://jsfiddle.net/kws9vrzp/

EDIT 2

Another option to see if it works in IE:

HTML code (note that I took the Multiple attribute and put the size attribute):

<tr>
                            <td width="10%" class="label_right">Autorização Prévia: &nbsp;</td>
                            <td class="label_left">
                                <select id="ddl_autorizacaoprevia" size=4 >
                                    <option value="0">TODAS AS AUTORIZAÇÕES</option>
                                    <option value="T">TÉCNICA / ADMINISTRATIVA</option>
                                    <option value="A">SISTÊMICA</option>
                                    <option value="N">NÃO PRECISA</option>
                                </select>
                            </td>
                        </tr>

Javascript - Note that I assign Multiple here:

function qs(q) {
   return document.querySelector(q);
}
function qsa(q) {
   return document.querySelectorAll(q);
}

qs("#ddl_autorizacaoprevia option:first-child").onclick = function(){
   var select = qs("#ddl_autorizacaoprevia");
   var tamanho = select.length;
   select.multiple=true;
   select.focus();
   for(var i=0;i<tamanho;i++){
      select.options[i].selected=true
   }
}

Example can be seen functional here: https://jsfiddle.net/Ls77e84e/

EDIT 3

I made some adaptations, but it was the way I was able to get what was requested in Internet Explorer, see if it interests:

<tr>
    <td width="10%" class="label_right">Autorização Prévia: &nbsp;</td>
    <td class="label_left">
        <select id="ddl_autorizacaoprevia" size=4 >
            <option value="T">TÉCNICA / ADMINISTRATIVA</option>
            <option value="A">SISTÊMICA</option>
            <option value="N">NÃO PRECISA</option>
        </select>
        <input id='selecionarTudo' type="checkbox"> TODAS AS AUTORIZAÇÕES
        </td>
    </tr>

JS:

function gi (q) {
        return document.getElementById(q);
    }
    gi("selecionarTudo").onclick = function () {
        var el = this;
        var select = gi("ddl_autorizacaoprevia");
        var tamanho = select.length;
        if(this.checked == true){
            select.multiple = true;
            // select.focus();
            for(var i=0;i < tamanho;i++){
                select.options[i].selected = true;
            }
    //Caso ache válido pode descomentar essa linha;
            //select.disabled = true; 
        } else{
            select.multiple = false;
            select.disabled = false;
            for(var i=1;i < tamanho;i++){
                select.options[i].selected = false;
            }
        }
    }

Jsfiddle: https://jsfiddle.net/yjqgq37L/