Select(HTML) with multiple selection. Mark one and should mark all, not working

Question

I have this select with multiples select

<tr>
                                <td width="10%" class="label_right">Autorização Prévia: &nbsp;</td>
                                <td class="label_left">
                                    <select id="ddl_autorizacaoprevia" 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>

What I wish is that when I select "ALL AUTHORISATIONS", all others should be selected and when I click on any other, all the selected ones should be unchecked and only the selected one should be checked (selected). I really don’t know how to do this. I’m looking on the internet, but so far I haven’t found anything.

Answer 1

With jquery it would be something like this:

$(document).ready(function(){

   $('#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(){
             $(this).removeAttr('selected'); 
          });
          $(that).attr('selected', 'selected');
       }

   }

});

Something on that line should solve your problem