mismo - jQuery y css: ocultar/mostrar las opciones de selección con una determinada clase de css
mostrar y ocultar div jquery (5)
En el código html he seleccionado opciones como esta:
<option value="1" class="myclass5">Value1</option>
En jQuery:
var cod = $(this).val(); // This is the value of another select: when the value
$("option[class^=myclass]").hide();
$("option[class^=myclass]").each(function () {
$("option[class^=myclass" + cod + "]").show();
});
EDITAR
Tengo dos selectos. Cuando selecciono un valor en la primera selección, el segundo debe completarse en consecuencia (tengo que evitar una llamada ajax).
Puse todos los valores de la segunda selección en una var de sesión, pero mi problema está en seleccionar solo aquellos vinculados a la primera selección, por lo que estaba intentando a través de las clases css.
EDIT2
<select name="firstselect">
<option value="0" selected="selected">Choose...</option>
<option value="1">Value1</option>
<option value="2">Value2</option>
<option value="3">Value3</option>
</select>
<select name="secondselect">
<option value="0" selected="selected">Choose...</option>
<option value="myclass1">Value11</option>
<option value="myclass1">Value12</option>
<option value="myclass1">Value13</option>
<option value="myclass2">Value21</option>
<option value="myclass2">Value22</option>
<option value="myclass2">Value23</option>
<option value="myclass3">Value31</option>
<option value="myclass3">Value32</option>
<option value="myclass3">Value33</option>
</select>
EDITAR3
Para mí, la solución de greenish es buena, pero hay un problema en IE que no logro explicar: cuando uso el botón de retroceso, el valor seleccionado por el usuario se "pierde", es decir, si inicio sesión en la consola, el usuario Valor seleccionado, veo su "índice" en la nueva selección clonada. En el código fuente html, hay toda la selección original.
EDITAR 4
Resolví gracias a este post.
Incluir un objeto javascript que tenga un mapeo de selecciones
Este tipo de pregunta surge a menudo en el desarrollo de SPA, y he desarrollado este enfoque. Lo que recomiendo es crear un objeto javascript con las diferentes listas de opciones y claves de objeto que consistan en los nombres de los campos de selección que harán que los hermanos: después de los campos de selección se creen dinámicamente, vinculando el evento "seleccionar" de la selección dependiente y ejecute un script personalizado para evaluar la opción seleccionada, analizar su mapa y, a continuación, representar las opciones en consecuencia.
He tomado este concepto y he creado un shell bastante ingenioso, que no solo debería permitirle hacerlo entre los dos elementos seleccionados que menciona, sino que esencialmente le permite tener tantos elementos seleccionados según lo desee ... rellenando todos Se basan en la selección realizada en el elemento dependiente. Aquí están las ventajas aún más frescas:
- el marcado html es extremadamente limpio
- puede inicializar dependencias incluso en las opciones de dependientes creadas dinámicamente
- El código javascript es muy limpio y preciso.
- esto puede hacerse fácilmente modular, por lo que podría convertirse en un complemento o módulo con solo unas pocas líneas de código
- fácil de crear de forma asíncrona nuevas opciones y alterar de forma asíncrona las dependencias usando
$.extend()y el objetoSelectOptionprovisto - el código se construye de tal manera que las diferentes listas de opciones se pueden inyectar en el objeto del
mapllamando a funciones personalizadas - trabajará en CUALQUIER ELEMENTO que pueda desencadenar el evento
select. Permitiéndole utilizar elementos que no sean formularios e inyectar la funcionalidad de tipo desplegable y que aún afecte a otros elementos (** funciona con Bootstrap!
He creado una esencia para demostrar los conceptos. Tengo el shell inicial listado aquí, pero revise el enlace para asegurarse de que tenga la versión y la información más actualizadas de esta idea. (Puedo convertirlo en un plugin)
https://gist.github.com/LongLiveCHIEF/7880119.js
form.html
<head>
<script src="jquery.js"></script><!-- use .js for easier DOM manipulation, can be done without, using the native DOM api -->
<script src="selection-map.js"></script>
</head>
<body>
<!-- select name="" values will be used inside the map object to initialize watch -->
<!-- the custom data-selmap-cascade="" property initializes the dynamic functionality, and the value should be an
-- string array format, where the values are the names of the select field whose options will depend on this
-- elements selected option
-->
<select data-selmap-cascade="[''secondselect'',''fourthselect'']" name="firstselect">
<option data-selmap-set-cascade="[''second-select : set2'', ''fourth-select : set1'']" value="0" selected="selected">Choose...</option>
<!-- list other options here, using the data-selmap-showselectfields settings for each dependent select field -->
</select>
<select class="selmap" name="secondselect">
<!-- will be created via selection-map.js -->
</select>
</body>
selection-map.js
// first we map our dependencies
var map = {
secondselect: [ //high level keys are the fields that will cause cascades
''set1'' : {[new SelectOption('''','''','''')],[new SelectOption('''','''','''')],[new SelectOption('''','''','''')]} // this is an option list, with gets a name as a key
''set2'' : {[new SelectOption('''','''','''')],[new SelectOption('''','''','''')],[new SelectOption('''','''','''')]},
''set3'' : {[new SelectOption('''','''','''')],[new SelectOption('''','''','''')],[new SelectOption('''','''','''')]},
],
fourthselect: [
''set1'' : {[new SelectOption('''','''','''')],[new SelectOption('''','''','''')],[new SelectOption('''','''','''')]}
]
};
// now we make it easy to inject select options at any point
var SelectOption = function(text, value, dependenSelectFields){
return {}; //retun object with properties corresponding to the attributes and values of a specific option
}
//and now we kick off processing
var $primaryElements = $.data(''selmap-cascade''); // create a collection consisting of any and all elements with selmap-cascade data option
//here we act when any designated dependent field has a selection change
$primaryelements.select(function(){
var mapkey = $(this + '':selected'').data(''selmap-set-cascade''); // get the data that will allow us to grab the proper select options for the dependent elements
//and now we render the correct option into the correct place in the DOM
});
Entonces, cuando entiendo su pregunta correctamente, usted quiere que las opciones del segundo campo de selección dependan del valor seleccionado en el primer campo de selección.
Intenté esto rápidamente y ocultar una opción con css no parece funcionar en todos los navegadores, incluso la última versión de Chrome en Mac no ocultará las opciones.
Entonces se me ocurrió lo siguiente:
HTML primero: usé clases para marcar las dependencias. Esto permite que el atributo de value en el segundo campo de selección se use sin restricciones.
Además, solo se cambiarán las opciones marcadas como conditional , las otras no se verán afectadas. Esto es útil para algo como el valor predeterminado en este escenario.
<select id="firstSelect">
<option value="0" selected="selected">Choose...</option>
<option value="value1">Value1</option>
<option value="value2">Value2</option>
<option value="value3">Value3</option>
</select>
<select id="secondSelect">
<option value="0" selected="selected">Choose...</option>
<option class="conditional value1" value="subValue1">Value1: Sub1</option>
<option class="conditional value2" value="subValue2">Value2: Sub1</option>
<option class="conditional value2" value="subValue3">Value2: Sub2</option>
<option class="conditional value2" value="subValue4">Value2: Sub3</option>
<option class="conditional value2" value="subValue5">Value2: Sub4</option>
<option class="conditional value2" value="subValue6">Value2: Sub5</option>
<option class="conditional value3" value="subValue7">Value3: Sub1</option>
<option class="conditional value3" value="subValue8">Value3: Sub2</option>
<option class="conditional value3" value="subValue9">Value3: Sub3</option>
</select>
Y el Javascript: para hacer que esto funcione, copié las opciones del campo secondSelect y las secondSelect en una variable. Esto me permite remove realmente las opciones del campo de selección mientras todavía puedo recuperar las opciones de la copia.
$(function(){
var conditionalSelect = $("#secondSelect"),
// Save possible options
options = conditionalSelect.children(".conditional").clone();
$("#firstSelect").change(function(){
var value = $(this).val();
// Remove all "conditional" options
conditionalSelect.children(".conditional").remove();
// Attach options that needs to be displayed for the selected value.
options.clone().filter("."+value).appendTo(conditionalSelect);
}).trigger("change");
});
Y aquí hay un violín que muestra el script en acción: http://jsfiddle.net/Kn8Gc/
Nota: si obtiene datos de una base de datos y el usuario ya seleccionó #firstSelect, solo use el atributo selected="selected" . #secondSelect mostrará automáticamente los valores correctos. ¡Solo pruebe el violín arriba y "preseleccione" por ejemplo, valor1 en lugar de 0!
También aquí hay una función "genérica" que se puede usar fácilmente para hacer que dos campos de selección dependan unos de otros (aún usando las clases conditional + source value para establecer la relación):
// "Generic" function
$.conditionalize = function(sourceSelect, conditionalSelect){
var options = conditionalSelect.children(".conditional").clone();
sourceSelect.change(function(){
var value = $(this).val();
conditionalSelect.children(".conditional").remove();
options.clone().filter("."+value).appendTo(conditionalSelect);
}).trigger("change");
}
// Used like this:
$.conditionalize($("#firstSelect"), $("#secondSelect"));
Y aquí está en acción: http://jsfiddle.net/NUxQ9/
La única forma en que logré que esto funcionara en todos los navegadores era separar y luego volver a adjuntar las opciones. Agregué una clase a cada opción para también romper el valor de la opción aparte de su agrupación. Estas dos cosas pueden estar relacionadas, pero no asumiré eso.
<select name="firstselect" id="firstselect">
<option value="0" selected="selected">Choose...</option>
<option value="1">Value1</option>
<option value="2" selected>Value2</option>
<option value="3">Value3</option>
</select>
<select name="secondselect" id="secondselect">
<option value="0">Choose...</option>
<option value="myclass1" class="group1">Value11</option>
<option value="myclass1" class="group1">Value12</option>
<option value="myclass1" class="group1">Value13</option>
<option value="myclass2" class="group2">Value21</option>
<option value="myclass2" class="group2">Value22</option>
<option value="myclass2" class="group2">Value23</option>
<option value="myclass3" class="group3">Value31</option>
<option value="myclass3" class="group3">Value32</option>
<option value="myclass3" class="group3">Value33</option>
</select>
y el Javascript ...
var groups = false;
function update_selected() {
// reset the secondselect
$("#secondselect").val(0);
$("#secondselect").find("option[value!=0]").detach();
// re-attach the correct options
$("#secondselect").append(groups.filter(".group" + $(this).val()));
}
$(function() {
// initialize by detaching all the options (except for the "Choose..." option)
groups = $("#secondselect").find("option[value!=0]");
groups.detach();
// add the onchange event handler
$("#firstselect").change(update_selected);
// immediately call update_selected to update on page load
$("#firstselect").trigger("change");
});
Fiddle: http://jsfiddle.net/JbVWV/8/
Editar: agregué la llamada a $("#firstselected").trigger("change") en la carga de la página. Entonces, si ya hay algo seleccionado en el primer menú desplegable, el segundo menú desplegable ya se completará correctamente.
No estoy seguro de entender completamente tu pregunta, pero ¿qué pasa con algo como esto?
$(document).ready(function(){
var cod = '''';
$(''select[name="firstselect"]'').change(function(){
cod = $(this).val();
if ( cod > 0 ) {
$(''select[name="secondselect"] option'').hide().filter(function(){
return ( $(this).val().substr(7,1) == cod || $(this).val() == 0 );
}).show();
}
});
});
Alternativamente , la opción de escritura dinámica también existe:
var dataset = [
{ set: 1, data: [
{ val: "value11", label: "Value 1 - 1" },
{ val: "value12", label: "Value 1 - 2" },
{ val: "value13", label: "Value 1 - 3" } ]
},
{ set: 2, data: [
{ val: "value21", label: "Value 2 - 1" },
{ val: "value22", label: "Value 2 - 2" },
{ val: "value23", label: "Value 2 - 3" } ]
}];
var chooser = "<option value=''0'' selected=''selected''>Choose...</option>";
$(''select[name="firstselect"]'').change(function(){
var n = $(this).val(); //get value of data set
if ( n != 0 ) {
var str = chooser; n--; //0-based n
for (i=0; i<dataset[n].data.length; i++) { //write options
str += "<option value=''" + dataset[n].data[i].val + "''>" + dataset[n].data[i].label + "</option>"
}
$(''select[name="secondselect"]'').html(str).attr("disabled",false);
}
});
Ocultar una opción no está definido en todos los navegadores. No está definido en la especificación W3C.
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
Deshabilitando la opción basada en el primer valor seleccionado
Puede deshabilitar la segunda opción que no permitirá al usuario seleccionar la opción.
DEMO: http://jsfiddle.net/HrpF2/
Código:
$(function () {
var $secondOptions = $(''select[name=secondselect] option'');
$("select[name=firstselect]").change(function () {
var value = $(this).val();
$secondOptions.prop(''disabled'', true).filter(function () {
return this.value == ''myclass'' + value;
}).prop(''disabled'', false);
}).trigger("change");
});
Mostrar / Ocultar opciones basadas en el primer valor seleccionado
Si realmente desea mostrar / ocultar opciones, entonces necesita clonar las segundas opciones y agregarlas nuevamente en función del primer valor seleccionado. Vea abajo,
DEMO: http://jsfiddle.net/HrpF2/1/
Código:
$(function () {
var $secondOptions = $(''select[name=secondselect]'');
var $cloneOptions = $secondOptions.find(''option'').clone();
$("select[name=firstselect]").change(function () {
var value = $(this).val();
$secondOptions.empty().append($cloneOptions.filter(function () {
return this.value == ''myclass'' + value;
}));
}).trigger("change");
});