mostrar - Ocultar opciones en una lista de selección usando jQuery
set value select jquery (22)
Tengo un objeto con pares clave / valor de opciones que quiero ocultar / eliminar de una lista de selección. Ninguno de los siguientes selectores de opciones funciona. ¿Qué me estoy perdiendo?
$.each(results[''hide''], function(name, title) {
$("#edit-field-service-sub-cat-value option[value=title]").hide();
$("#edit-field-service-sub-cat-value option[@value=title]").hide();
});
$ (''# id''). val ($ (''# id opción: eq (0)''). hide ());
opción: opción eq (0) -hide en el índice ''0'' en el cuadro de selección.
Aquí está mi giro, probablemente un poco más rápido debido a los métodos DOM nativos
$.each(results[''hide''], function(name, title) {
$(document.getElementById(''edit-field-service-sub-cat-value'').options).each(function(index, option) {
if( option.value == title ) {
option.hidden = true; // not fully compatible. option.style.display = ''none''; would be an alternative or $(option).hide();
}
});
});
Cualquiera que tropiece con esta pregunta también podría considerar el uso de Chosen , que amplía enormemente las capacidades de los seleccionados.
El problema es que Internet Explorer no parece ser compatible con los métodos ocultar y mostrar para seleccionar opciones. Quería ocultar todas las opciones de mi selección ddlReasonCode que no tenían el tipo seleccionado actualmente como el valor del atributo "attType".
Mientras que el adorable Chrome estaba bastante satisfecho con:
//Hiding all options
$("#ddlReasonCode").children().hide();
//Showing only the relevant options
$("#ddlReasonCode").children("option[atttype=/"" + CurrentType + "/"]").show();
Esto es lo que requiere IE (niños, no pruebes esto en CROMO :-)):
//Hiding all options
$("#ddlReasonCode option").each(function (index, val) {
if ($(this).is(''option'') && (!$(this).parent().is(''span'')) && ($(this).atttype != CurrentType))
$(this).wrap(''<span>'').hide();
});
//Showing only the relevant options
$("#ddlReasonCode option").each(function (index, val) {
if (this.nodeName.toUpperCase() === ''OPTION'') {
var span = $(this).parent();
var opt = this;
if ($(this).parent().is(''span'') && ((this).atttype == CurrentType)) {
$(opt).show();
$(span).replaceWith(opt);
}
}
});
Encontré esa idea de envoltura en http://ajax911.com/hide-options-selecbox-jquery/
En referencia a la sugerencia de redsquare, terminé haciendo esto:
var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();
y luego para invertir esto:
$("#edit-field-service-sub-cat-value").append(selectItems);
Encontré una mejor manera, y es muy simple:
$("option_you_want_to_hide").wrap(''<span/>'')
Para volver a mostrar, solo encuentra esa opción (no span) y $("option_you_want_to_show").unwrap() .
Fue probado en Chrome y Firefox.
Estaba tratando de ocultar las opciones de una lista de selección basada en la opción seleccionada de otra lista de selección. Funcionaba en Firefox3, pero no en Internet Explorer 6. Aquí tengo algunas ideas y tengo una solución, por lo que me gustaría compartir:
El código JavaScript
function change_fruit(seldd) {
var look_for_id=''''; var opt_id='''';
$(''#obj_id'').html("");
$("#obj_id").append("<option value=''0''>-Select Fruit-</option>");
if(seldd.value==''0'') {
look_for_id=''N'';
}
if(seldd.value==''1''){
look_for_id=''Y'';
opt_id=''a'';
}
if(seldd.value==''2'') {
look_for_id=''Y'';
opt_id=''b'';
}
if(seldd.value==''3'') {
look_for_id=''Y'';
opt_id=''c'';
}
if(look_for_id==''Y'') {
$("#obj_id_all option[id=''"+opt_id+"'']").each(function() {
$("#obj_id").append("<option value=''"+$(this).val()+"''>"+$(this).text()+"</option>");
});
}
else {
$("#obj_id_all option").each(function() {
$("#obj_id").append("<option value=''"+$(this).val()+"''>"+$(this).text()+"</option>");
});
}
}
El HTML
<select name="obj_id" id="obj_id">
<option value="0">-Select Fruit-</option>
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>
<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
<option value="0">All</option>
<option value="1">Starts with A</option>
<option value="2">Starts with B</option>
<option value="3">Starts with C</option>
</select>
<select name="obj_id_all" id="obj_id_all" style="display:none;">
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>
Se comprobó que funcionaba en Firefox 3 e Internet Explorer 6.
Esto funciona en Firefox 3.0, pero no en MSIE 8, ni en Opera 9.62:
jQuery(''#destinations'').children(''option[value="1"]'').hide();
jQuery(''#destinations'').children(''option[value="1"]'').css(''display'',''none'');
Pero en lugar de ocultar una opción, uno simplemente puede deshabilitarla:
jQuery(''#destinations'').val(''2'');
jQuery(''#destinations'').children(''option[value="1"]'').attr(''disabled'',''disabled'');
La primera de las dos líneas anteriores es para Firefox y pasa el foco a la segunda opción (suponiendo que tiene valor = "2"). Si lo omitimos, la opción está deshabilitada, pero la imagen sigue mostrando la opción "habilitada" antes de soltarla. Por lo tanto, pasamos foco a otra opción para evitar esto.
Implementé una solución usando una función que filtra un cuadro combinado ( <select> ) basado en atributos de datos personalizados. Esta solución es compatible con:
- Tener una
<option>para mostrar cuándo el filtro dejaría el select vacío. - Respeta los atributos seleccionados existentes.
-
<option>elementos<option>sin el atributo de filtro de datos quedan intactos.
Probado con jQuery 2.1.4 y Firefox, Chrome, Safari e IE 10+.
Este es el ejemplo HTML:
<select id="myCombobox">
<option data-filter="1" value="AAA">Option 1</option>
<option data-filter="1" value="BBB">Option 2</option>
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
<option data-filter="3" value="EEE">Option 5</option>
<option data-filter="3" value="FFF">Option 6</option>
<option data-filter-emptyvalue disabled>No Options</option>
</select>
El código jQuery para el filtrado:
function filterCombobox(selectObject, filterValue, autoSelect) {
var fullData = selectObject.data("filterdata-values");
var emptyValue = selectObject.data("filterdata-emptyvalue");
// Initialize if first time.
if (!fullData) {
fullData = selectObject.find("option[data-filter]").detach();
selectObject.data("filterdata-values", fullData);
emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
selectObject.data("filterdata-emptyvalue", emptyValue);
selectObject.addClass("filtered");
}
else {
// Remove elements from DOM
selectObject.find("option[data-filter]").remove();
selectObject.find("option[data-filter-emptyvalue]").remove();
}
// Get filtered elements.
var toEnable = fullData.filter("option[data-filter][data-filter=''" + filterValue + "'']");
// Attach elements to DOM
selectObject.append(toEnable);
// If toEnable is empty, show empty option.
if (toEnable.length == 0) {
selectObject.append(emptyValue);
}
// Select First Occurrence
if (autoSelect) {
var obj = selectObject.find("option[selected]");
selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
}
}
Para usarlo, simplemente llame a la función con el valor que desea conservar.
filterCombobox($("#myCombobox"), 2, true);
Entonces, la selección resultante será:
<select id="myCombobox">
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
</select>
Los elementos originales son almacenados por la función data (), por lo que las llamadas posteriores agregarán y eliminarán los elementos correctos.
La respuesta indica que @ no es válido para las iteraciones de jQuery más recientes. Si bien eso es correcto, algunos IEs más antiguos aún no ocultan elementos de opciones. Para cualquiera que tenga que lidiar con elementos de opciones de ocultamiento en las versiones afectadas, publiqué una solución alternativa aquí:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
Básicamente solo envuélvelo con un lapso y reemplácelo por el espectáculo.
Me pareció mejor simplemente eliminar el DOM por completo.
$(".form-group #selectId option[value=''39'']").remove();
Compatible con navegador cruzado Funciona en IE11 también
Mire esta pregunta y las respuestas -
Desactivar opciones de selección ...
Al mirar su código, puede que necesite citar el valor del atributo
$("#edit-field-service-sub-cat-value option[value=''title'']").hide();
de los selectores de atributos jQuery
Las citas son opcionales en la mayoría de los casos, pero se deben usar para evitar conflictos cuando el valor contiene caracteres como "]"
EDITAR:
Me acabo de dar cuenta de que está obteniendo el título del parámetro de la función, en cuyo caso la sintaxis debe ser
$("#edit-field-service-sub-cat-value option[value=''" + title + "'']").hide();
No puedes hacer esto x-browser. Si recuerdo, es decir, tiene problemas. Lo más fácil es mantener una copia clonada de la selección antes de eliminar los elementos, esto le permite eliminar fácilmente y luego agregar los elementos faltantes.
Para evitar la concatenación de cadenas, puede usar jQuery.grep
$($.grep($("#edit-field-service-sub-cat-value option"),
function(n,i){
return n.value==title;
})
).hide()
Para ocultar la opción en el uso selecto :
option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item
Donde option_node es HTMLOptionElement
PD: No uso JQuery, pero supongo que funcionará:
$(''.my_select option[value="my_cool_value"]'').hidden = true
Parece que también debe actualizar el atributo "seleccionado". De lo contrario, la opción actualmente seleccionada puede seguir apareciendo, aunque probablemente desaparecerá cuando realmente seleccione una opción (eso es lo que hizo para mí): intente hacer esto:
$(''#mySelector'').children(''option'').hide();
$(''#mySelector'').children(''option'').removeAttr("selected"); //this may be overkill.
$(''#mySelector'').children(''option[value="''+SelVal+''"]'').show();
$(''#mySelector'').children('':visible'').attr(''selected'',''selected''); //assuming that something is still on the list.
Por lo que vale, la segunda forma (con el @ ) no existe en jQuery 1.3. El primero no funciona porque aparentemente esperas una interpolación variable. Prueba esto:
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
Tenga en cuenta que esto probablemente se romperá de varias maneras horribles si el title contiene metacaracteres del selector jQuery.
Probablemente no sea tan elegante o tan reutilizable como un plugin jquery. pero otro enfoque es simplemente guardar elementos de opciones y cambiarlos según sea necesario:
var SelectFilter = function ()
{
this.allOptions = $("#someSelect option");
this.fooBarOptions= $("#someSelect option[value=''foo'']");
this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value=''bar'']"));
this.showFooBarOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.fooBarOptions);
};
this.showAllOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.allOptions);
};
};
haz esto para usar el objeto:
var filterObject = new SelectFilter();
filterObject.showFooBarOptions ();
Sé que esta pregunta ha sido respondida. Pero mi requisito era ligeramente diferente. En lugar de valor, quería filtrar por texto. Así que modifiqué la respuesta de @William Herry de esta manera.
var array = [''Administration'', ''Finance'', ''HR'', ''IT'', ''Marketing'', ''Materials'', ''Reception'', ''Support''];
if (somecondition) {
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").unwrap();
});
}
else{
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").wrap(''<span/>'');
});
}
De esta forma puede usar el valor también reemplazando contiene así
$("div#ovrcateg option[value=" + this + "]").wrap(''<span/>'');
Se PUEDE hacer cruzado navegador; solo requiere una programación personalizada. Por favor, vea mi violín en http://jsfiddle.net/sablefoste/YVMzt/6/ . Se probó para funcionar en Chrome, Firefox, Internet Explorer y Safari.
En resumen, tengo un campo oculto, #optionstore , que almacena la matriz de forma secuencial (ya que no puede tener matrices asociativas en JavaScript). Luego, cuando cambia la categoría, analiza las opciones existentes (solo por primera vez) las escribe en #optionstore , borra todo y solo recupera las asociadas a la categoría.
NOTA: Creé esto para permitir diferentes valores de opción del texto que se muestra al usuario, por lo que es muy flexible.
El HTML:
<p id="choosetype">
<div>
Food Category:
</div>
<select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
<option value="">All Food</option>
<option value="Food1">Fruit</option>
<option value="Food2">Veggies</option>
<option value="Food3">Meat</option>
<option value="Food4">Dairy</option>
<option value="Food5">Bread</option>
</select>
<div>
Food Selection
</div>
<select name="foodType" id="foodType" size="1">
<option value="Fruit1" class="sub-Food1">Apples</option>
<option value="Fruit2" class="sub-Food1">Pears</option>
<option value="Fruit3" class="sub-Food1">Bananas</option>
<option value="Fruit4" class="sub-Food1">Oranges</option>
<option value="Veg1" class="sub-Food2">Peas</option>
<option value="Veg2" class="sub-Food2">Carrots</option>
<option value="Veg3" class="sub-Food2">Broccoli</option>
<option value="Veg4" class="sub-Food2">Lettuce</option>
<option value="Meat1" class="sub-Food3">Steak</option>
<option value="Meat2" class="sub-Food3">Chicken</option>
<option value="Meat3" class="sub-Food3">Salmon</option>
<option value="Meat4" class="sub-Food3">Shrimp</option>
<option value="Meat5" class="sub-Food3">Tuna</option>
<option value="Meat6" class="sub-Food3">Pork</option>
<option value="Dairy1" class="sub-Food4">Milk</option>
<option value="Dairy2" class="sub-Food4">Cheese</option>
<option value="Dairy3" class="sub-Food4">Ice Cream</option>
<option value="Dairy4" class="sub-Food4">Yogurt</option>
<option value="Bread1" class="sub-Food5">White Bread</option>
<option value="Bread2" class="sub-Food5">Panini</option>
</select>
<span id="optionstore" style="display:none;"></span>
</p>
El JavaScript / jQuery:
$(document).ready(function() {
$(''#category'').on("change", function() {
var cattype = $(this).val();
optionswitch(cattype);
});
});
function optionswitch(myfilter) {
//Populate the optionstore if the first time through
if ($(''#optionstore'').text() == "") {
$(''option[class^="sub-"]'').each(function() {
var optvalue = $(this).val();
var optclass = $(this).prop(''class'');
var opttext = $(this).text();
optionlist = $(''#optionstore'').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
$(''#optionstore'').text(optionlist);
});
}
//Delete everything
$(''option[class^="sub-"]'').remove();
// Put the filtered stuff back
populateoption = rewriteoption(myfilter);
$(''#foodType'').html(populateoption);
}
function rewriteoption(myfilter) {
//Rewrite only the filtered stuff back into the option
var options = $(''#optionstore'').text().split(''@%'');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";
myfilterclass = (myfilter != "")?myfilterclass:"all";
//First variable is always the value, second is always the class, third is always the text
for (var i = 3; i < options.length; i = i + 3) {
if (options[i - 1] == myfilterclass || myfilterclass == "all") {
optionlisting = optionlisting + ''<option value="'' + options[i - 2] + ''" class="'' + options[i - 1] + ''">'' + options[i] + ''</option>'';
resultgood = true;
}
}
if (resultgood) {
return optionlisting;
}
}
Su mejor opción es establecer disabled = true en los elementos de opción que desea deshabilitar, luego en el conjunto de CSS
option:disabled {
display: none;
}
De esta forma, incluso si el navegador no admite ocultar el elemento deshabilitado, aún no se puede seleccionar, pero en los navegadores que lo admitan, se ocultará.
$("option_you_want_to_hide").addClass(''hidden'')
Luego, en su CSS, asegúrese de tener
.hidden{
display:none;
}