Multiple selection does not work in IE

Question

Multiple selection does not work in IE

Navigation

#1 by (1 votes)

-3

I made a post on how with a choice, select all items. I got an answer, which it solved. well, it solved only in Chrome, but IE does not work. As the question changed the "direction", then I decided to do another post. It includes other versions of jquery and even then it did not work. This is the code for 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 fine in Chrome, but it does not work in IE. What can it be? Only works with Ctrl + Click, then I can select all, but only when clicking the first index (index = 0), there does not select all the items, but in Chrome works and the company-approved browser is IE and not chrome logo I have to make it work in IE.

javascript jquery asp.net internet-explorer

asked by anonymous 19.01.2016 / 21:52

1 answer

How to do if several variables with "or" work? tcp server chat [closed]

score 1 · Answer 1

Hello,

I do not think I needed all this, test with this code:

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

See this example here: link

EDIT

I made a pure javascript implementation to see if it solved 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 sample: link

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 the 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: link

EDIT 3

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

<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: link