html - texto - Cómo usar la casilla de verificación dentro de la opción Seleccionar
radio button html ejemplo (7)
El cliente me ha dado un diseño que tiene un menú Seleccionar opción que contiene una casilla junto con el nombre del elemento como elementos individuales en la lista. ¿Hay alguna posibilidad de agregar una casilla de verificación dentro de un menú Seleccionar opción?
NB: El desarrollador debe agregar su propia identificación para que el menú sea efectivo, solo necesito el código CSS HTML si es posible.
El mejor complemento hasta el momento es Bootstrap Multiselect
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
</head>
<body>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$(''#chkveg'').multiselect({
includeSelectAllOption: true
});
$(''#btnget'').click(function(){
alert($(''#chkveg'').val());
});
});
</script>
</div>
</form>
</body>
</html>
Aquí está la DEMO
Es posible que esté cargando el archivo multiselect.js antes de que la lista de opciones esté actualizada con la llamada AJAX, por lo que, mientras se ejecuta el archivo multiselect.js, la lista de opciones está vacía para aplicar la función de selección múltiple. Así que primero actualice la lista de opciones por llamada AJAX y luego inicie la llamada multiselección; obtendrá la lista desplegable con la lista de opciones dinámicas.
Espero que esto te ayude.
Lista desplegable de selección múltiple y archivos js y css relacionados
// This function should be called while loading page
var loadParentTaskList = function(){
$.ajax({
url: yoururl,
method: ''POST'',
success: function(data){
// To add options list coming from AJAX call multiselect
for (var field in data) {
$(''<option value = "''+ data[field].name +''">'' + data[field].name + ''</option>'').appendTo(''#parent_task'');
}
// To initiate the multiselect call
$("#parent_task").multiselect({
includeSelectAllOption: true
})
}
});
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
No puede colocar la casilla de verificación dentro del elemento seleccionado, pero puede obtener la misma funcionalidad usando HTML, CSS y JavaScript. Aquí hay una posible solución de trabajo. La explicación sigue.
Código:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
Explicación:
Al principio, creamos un elemento de selección que muestra el texto "Seleccionar una opción" y un elemento vacío que cubre (se superpone) el elemento de selección ( <div class="overSelect"> ). No queremos que el usuario haga clic en el elemento de selección; mostraría una opción vacía. Para superponer el elemento con otro elemento usamos la propiedad de posición CSS con valor relativo | absoluto.
Para agregar la funcionalidad, especificamos una función de JavaScript que se llama cuando el usuario hace clic en el div que contiene nuestro elemento de selección ( <div class="selectBox" onclick="showCheckboxes()"> ).
También creamos div que contiene nuestras casillas de verificación y lo diseñamos usando CSS. La función de JavaScript mencionada anteriormente solo cambia el <div id="checkboxes"> valor de la propiedad de visualización de CSS de "ninguno" a "bloque" y viceversa.
La solución fue probada en los siguientes navegadores: Internet Explorer 10, Firefox 34, Chrome 39. El navegador debe tener habilitado JavaScript.
Más información:
Posicionamiento CSS
Cómo superponer un div sobre otro div
http://www.w3schools.com/css/css_positioning.asp
Propiedad de visualización de CSS
Para un enfoque de CSS puro , puede usar el selector :checked combinado con el selector ::before para contenido condicional en línea.
Simplemente agregue la select-checkbox clase a su elemento de select e incluya el siguiente CSS:
.select-checkbox option::before {
content: "/2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "/2611";
}
Puede usar caracteres simples antiguos de Unicode (con una codificación hexadecimal escapada ) como estos:
- ☐ urnas -
/2610 - ☑ urnas con cheque -
/2611
O si desea darle vida a las cosas, puede usar estos glifos de FontAwesome
- .fa-square-o -
/f096 - .fa-check-square-o -
/f046
Demostración en jsFiddle & Stack Snippets
select {
width: 150px;
}
.select-checkbox option::before {
content: "/2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "/2611";
}
.select-checkbox-fa option::before {
font-family: FontAwesome;
content: "/f096";
width: 1.3em;
display: inline-block;
margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
content: "/f046";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>
<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
<option>Dog</option>
<option>Cat</option>
<option>Hippo</option>
<option>Dinosaur</option>
<option>Another Dog</option>
</select>
Nota : Tenga cuidado con los problemas de compatibilidad de IE sin embargo
Pruebe selección multiple-select . Parece ser una solución muy limpia y administrada, con toneladas de ejemplos.
Puede usar esta biblioteca en git para este propósito https://github.com/ehynds/jquery-ui-multiselect-widget
para iniciar la selectbox usa esto
$("#selectBoxId").multiselect().multiselectfilter();
y cuando tenga los datos listos en json (de ajax o cualquier método), primero analice los datos y luego asigne la matriz js a ella
var js_arr = $.parseJSON(/*data from ajax*/);
$("#selectBoxId").val(js_arr);
$("#selectBoxId").multiselect("refresh");
Use este código para la lista de casilla de verificación en el menú de opciones.
<div class="btn-group">
<a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" style="padding: 10px" id="myDiv">
<li><p><input type="checkbox" value="id1" style="margin-right: 10px;" name="class"> OA Number</p></li>
<li><p><input type="checkbox" value="id2" style="margin-right: 10px;" name="class">Customer</p></li>
<li><p><input type="checkbox" value="id3" style="margin-right: 10px;"name="class"> OA Date</p></li>
<li><p><input type="checkbox" value="id4" style="margin-right: 10px;" name="class">Product Code</p></li>
<li><p><input type="checkbox" value="id5" style="margin-right: 10px;" name="class">Name</p></li>
<li><p><input type="checkbox" value="id6" style="margin-right: 10px;" name="class">WI Number</p></li>
<li><p><input type="checkbox" value="id7" style="margin-right: 10px;" name="class">WI QTY</p></li>
<li><p><input type="checkbox" value="id8" style="margin-right: 10px;" name="class">Production QTY</p></li>
<li><p><input type="checkbox" value="id9" style="margin-right: 10px;" name="class">PD Sr.No (from-to)</p></li>
<li><p><input type="checkbox" value="id10" style="margin-right: 10px;" name="class"> Production Date</p></li>
<button class="btn btn-info" onClick="showTable();">Go</button>
</ul>
</div>