What can i do to make select drop down show the first element (Select All) and not to close every time i click on it?

So I'm using for and if to fill my select drop down from database and separating them by groups in the process. I added another option to the list, which you can see down below in the script and is Select All (Seleccionar Todo) but whenever I click the select to see the list it shows me Opciones and i have to scroll up to see select all option. Also, when i click on select all it works and selects me every box on the drop down but closes the drop down list every time i click on it and i don't want it to do that. I'm using materialize to do this and its version is 0.100.2.

    <!DOCTYPE html>
      <html>
       <head>
        <!--Import Google Icon Font-->
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <!--Import materialize.css-->


         <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->

      </head>

      <body>
         <div class="container">
          <div class="row">
           <div class="col s20 m9 l10">
            <div class="content-wrapper">
              <div class="input-field">
                <div class = "card-panel hoverable">
                 <form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8"><input name="_token" type="hidden" value="xxI3KuBXRt2OHDkFEA3qTPvhHpWoxOFDXBeCxJKt">

       <div class="input-field">
     <br><select multiple class="select_todo">

        <option  value=""  disabled selected>Opciones</option>

        <optgroup  label="Primer Nivel">


            <option value="1">Clínicas Odontologicas</option>




            <option value="2">Recepción Odontología</option>




            <option value="3">Tesorería</option>




            <option value="4">Pastoral Universitaria</option>




                     <optgroup label="Segundo Nivel">










            <option value="5">Laboratorio de Biología</option>




            <option value="6">Bienestar Universitario</option>




            <option value="7">Registro</option>




            <option value="8">Agencia Bancaria</option>




            <option value="9">Librería</option>





                                </optgroup>
        <optgroup label="Unidades Academicas">




             <option value="10">Unidades Academicas</option>




             <option value="11">Dirección Psicología</option>




             <option value="12">Medicina</option>




             <option value="13">Ciencias Administrativas</option>




             <option value="14">Odontología</option>




             <option value="15">Civil</option>




             <option value="16">Industrial</option>




             <option value="17">Computación</option>




             <option value="18">Arquitectura</option>




             <option value="19">Estudios Generales</option>




             <option value="20">Derecho</option>




             <option value="21">Enfermería</option>


                      </optgroup>
          <optgroup label="Tercer Nivel">





              <option value="22">Recepción</option>




              <option value="23">Contabilidad</option>




              <option value="24">Recursos Humanos</option>




              <option value="25">Dirección de Campus</option>




              <option value="26">Dirección Administrativa</option>




              <option value="27">Dirección de Postgrado</option>




              <option value="28">Marketing</option>




              <option value="29">Compras</option>




              <option value="30">C.T.I.T</option>




              <option value="31">Biblioteca</option>




                        </optgroup>
            <optgroup label="Cuarto Nivel">


            <option value="32">Investigación</option>


                          </optgroup>
      </select>
         <label>Seleccionar uno, varios o todos los departamentos</label>
</div>
</div>





          </div>

        </div>
      </div>
    </div>
  </div>
  <!--JavaScript at end of body for optimized loading-->
  <!--Import jQuery before materialize.js-->


   <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


     </body>
  </html>

With this script I'm creating the option Select All on the drop down select to check all elements on the drop down with one click and uncheck them otherwise.

      <script>
  $('select').material_select();
  $('select.select_todo').siblings('ul').prepend('<li id=sm_select_todo> 
  <span>Seleccionar Todo</span></li>');
     $('li#sm_select_todo').on('click', function () {
     var jq_elem = $(this),
       jq_elem_span = jq_elem.find('span'),
       select_todo = jq_elem_span.text() == 'Seleccionar Todo',
       poner_texto = select_todo ? 'Quitar Selección' : 'Seleccionar Todo';
       jq_elem_span.text(poner_texto);
       jq_elem.siblings('li').filter(function() {
       return $(this).find('input').prop('checked') != select_todo;
  }).click();
});


 </script>

Solution

Both your JS and markup are invalid. Possibly because you copy-pasted only a bit of your markup. Still, you should run your HTML through a validator.

$('select').material_select();
$('select.select_todo').siblings('ul').prepend($('<li />', {
  id: "sm_select_todo",
  html: $('<span />', {
    html: '<input type="checkbox"><label>Seleccionar Todo</label>'
  })
}));
$('#sm_select_todo').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  let select_todo = $('span label', this).text() === 'Seleccionar Todo';
  $('span label', this).text(select_todo ? 'Quitar Selección' : 'Seleccionar Todo');
  $('input[type="checkbox"]:not(#sm_select_todo input)', $(this).closest('.select_todo'))
    .prop('checked', select_todo).trigger('click');
  $('input[type="checkbox"]', this).prop('checked',select_todo);
});

Also, in what you posted, the <form> element is not closed, which is usually a major problem.

See it working here (note nested <optgroup>s are invalid, I had to close them to make it validate):

$('select').material_select();
$('select.select_todo').siblings('ul').prepend($('<li />', {
  id: "sm_select_todo",
  html: $('<span />', {
    html: '<input type="checkbox"><label>Seleccionar Todo</label>'
  })
}));
$('#sm_select_todo').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  let select_todo = $('span label', this).text() === 'Seleccionar Todo';
  $('span label', this).text(select_todo ? 'Quitar Selección' : 'Seleccionar Todo');
  $('input[type="checkbox"]:not(#sm_select_todo input)', $(this).closest('.select_todo'))
    .prop('checked', select_todo).trigger('click');
  $('input[type="checkbox"]', this).prop('checked',select_todo);
});

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#sm_select_todo {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 1;
  height: 52px;
}

#sm_select_todo label,
#sm_select_todo span{
  font-size: 16px;
    color: #26a69a;
    display: block;
    line-height: 22px;
}
#sm_select_todo span {
  padding: 2px 16px 14px 30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col s20 m9 l10">
      <div class="content-wrapper">
        <div class="input-field">
          <div class="card-panel hoverable">
            <form method="POST" action="http://localhost/evaluaciones/public/evaluaciones" accept-charset="UTF-8"><input name="_token" type="hidden" value="xxI3KuBXRt2OHDkFEA3qTPvhHpWoxOFDXBeCxJKt">
              <div class="input-field">
                <select multiple class="select_todo">
                  <option value="" disabled selected>Opciones</option>
                  <optgroup label="Primer Nivel">
                    <option value="1">Clínicas Odontologicas</option>
                    <option value="2">Recepción Odontología</option>
                    <option value="3">Tesorería</option>
                    <option value="4">Pastoral Universitaria</option>
                  </optgroup>
                  <optgroup label="Segundo Nivel">
                    <option value="5">Laboratorio de Biología</option>
                    <option value="6">Bienestar Universitario</option>
                    <option value="7">Registro</option>
                    <option value="8">Agencia Bancaria</option>
                    <option value="9">Librería</option>
                  </optgroup>
                  <optgroup label="Unidades Academicas">
                    <option value="10">Unidades Academicas</option>
                    <option value="11">Dirección Psicología</option>
                    <option value="12">Medicina</option>
                    <option value="13">Ciencias Administrativas</option>
                    <option value="14">Odontología</option>
                    <option value="15">Civil</option>
                    <option value="16">Industrial</option>
                    <option value="17">Computación</option>
                    <option value="18">Arquitectura</option>
                    <option value="19">Estudios Generales</option>
                    <option value="20">Derecho</option>
                    <option value="21">Enfermería</option>
                  </optgroup>
                  <optgroup label="Tercer Nivel">
                    <option value="22">Recepción</option>
                    <option value="23">Contabilidad</option>
                    <option value="24">Recursos Humanos</option>
                    <option value="25">Dirección de Campus</option>
                    <option value="26">Dirección Administrativa</option>
                    <option value="27">Dirección de Postgrado</option>
                    <option value="28">Marketing</option>
                    <option value="29">Compras</option>
                    <option value="30">C.T.I.T</option>
                    <option value="31">Biblioteca</option>
                  </optgroup>
                  <optgroup label="Cuarto Nivel">
                    <option value="32">Investigación</option>
                  </optgroup>
                </select>
                <label>Seleccionar uno, varios o todos los departamentos</label>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>