我该怎么做才能使 select 下拉菜单显示第一个元素（Select 全部），而不是每次单击它时都关闭？

Question

所以我使用 for 和 if 来填充我的 select 从数据库中下拉，并在此过程中将它们按组分开。我在列表中添加了另一个选项，您可以在下面的脚本中看到它 Select All (Seleccionar Todo) 但每当我单击 select 查看列表时，它会显示 Opciones 并且我有向上滚动以查看 select 所有选项。另外，当我点击 select 一切正常时，select 向我发送下拉菜单中的每个框，但每次我点击它时都会关闭下拉列表，我不希望它这样做.我正在使用 materialize 来执行此操作，它的版本是 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>

使用此脚本，我正在创建选项 Select All on the drop down select 以单击选中下拉列表中的所有元素，否则取消选中它们。

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

Answer 1

您的 JS 和标记均无效。可能是因为您只复制粘贴了一部分标记。不过，您应该运行您的 HTML 通过验证器。

$('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);
});

此外，在您发布的内容中，<form> 元素未关闭，这通常是一个主要问题。

看到它在这里工作（注意嵌套的 <optgroup> 无效，我不得不关闭它们以使其有效）：

$('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>

我该怎么做才能使 select 下拉菜单显示第一个元素（Select 全部），而不是每次单击它时都关闭？

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?

html

javascript

jquery

materialize