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?
Clash Royale CLAN TAG#URR8PPPWhat 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>
drive.google.com/open?id=1PfWokUxhdtTAVztx-DJumpfxj_dqiIMR Here is a video of the result.
– M Mufasa
1 hour ago
Best of luck finding someone who can inspect the source markup of a page displayed in a video.
– Andrei Gheorghiu
1 hour ago
Haven’t finished putting the rest of code pal I’m working on that right now. And I have to show the result so you don’t get lost.
– M Mufasa
57 mins ago
I'm trying to help. I can't help because I don't have access to HTML, but to
@if @endif and I don't know what is the output of that logic. All you need to do is to copy/paste the generated (relevant) markup from the browser. Use "View source" option. Paste it here, instead of the backend script that generates it. If you follow my advice, a lot more people will be able to help.– Andrei Gheorghiu
55 mins ago
@if
@endif
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Post the result of your back-end code (the HTML markup) and any relevant CSS / JS for your issue. Regardless of your back-end framework the browsers only care about your HTML + CSS + JS and it looks like that's what you need help with.
– Andrei Gheorghiu
1 hour ago