javascript - none - style.display visible
style.display=''none'' no funciona en etiquetas de opción en cromo, pero sí en firefox (8)
Ok, aquí hay un código de muestra que demuestra el problema. si hago clic en el botón en firefox, la primera opción desaparece. si hago clic en el botón en cromo, no pasa nada, o más bien si inspecciono la primera opción, tiene el atributo "style = ''display: none''" pero la opción en sí misma en la página html no está oculta.
<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName(''option'')[0].style.display=''none''" value="hide option 1">
</form>
¿Por qué esto no funciona en Chrome?
Como mi solución (asp.net). Trato de hacer de esa manera. 1. Crear una lista desplegable con todos los elementos de la lista 2.Usar javscript para agregar o eliminar elementos de la lista (Nota: la opción agregar necesita el mismo valor y texto en los elementos asp: dropdowlist)
function removeOptionSelected()
{
var ddl = document.getElementById(''ddl_DropList'');
var i;
for (i = ddl.length - 1; i>=0; i--) {
ddl.remove(i);
}
}
function addOptions3()
{
removeOptionSelected();
var ddl = document.getElementById(''ddl_DropList'');
var elOptNew = document.createElement(''option'');
elOptNew.text = ''Monthly Top Producer(Project)'';
elOptNew.value = ''GCE'';
try {
ddl.add(elOptNew, null); // standards compliant; doesn''t work in IE
}
catch(ex) {
ddl.add(elOptNew); // IE only
}
elOptNew = document.createElement(''option'');
elOptNew.text = ''Monthly Top Leaders - DD'';
elOptNew.value = ''DRE'';
try {
ddl.add(elOptNew, null); // standards compliant; doesn''t work in IE
}
catch(ex) {
ddl.add(elOptNew); // IE only
}
elOptNew = document.createElement(''option'');
elOptNew.text = ''Monthly Top Leaders - SDD'';
elOptNew.value = ''DRESDD'';
try {
ddl.add(elOptNew, null); // standards compliant; doesn''t work in IE
}
catch(ex) {
ddl.add(elOptNew); // IE only
}
elOptNew = document.createElement(''option'');
elOptNew.text = ''Monthly Top Leaders - GD'';
elOptNew.value = ''GRE'';
try {
ddl.add(elOptNew, null); // standards compliant; doesn''t work in IE
}
catch(ex) {
ddl.add(elOptNew); // IE only
}
La pregunta es más bien por qué eso funciona en cualquier navegador en absoluto?
Las opciones no se usan como elementos en la página, contienen la información para mostrar en el elemento de selección. Algunos navegadores le permiten aplicar algunos estilos a las opciones, pero en general no se puede esperar soporte cruzado para ningún estilo en absoluto.
Si desea evitar que se muestre una opción, solo tiene que eliminarla de la selección.
La solución consiste en eliminar los elementos de option en respuesta a su evento y volver a agregarlos cuando sea necesario. IIRC, IE no le permitirá configurar la display a none en los elementos de option . Te aconsejo que guardes los elementos eliminados en una matriz para que puedas volver a agregarlos fácilmente.
Para eliminar una opción del formulario de selección, se pueden usar los $ jQuery $ (). Eq (). Remove () o $ (). Remove ().
Similar fue mi eliminación de una fila de tabla de la tabla:
$(''form table tr'').eq(1).remove();
dónde:
$(''form table tr'')
decir que el elemento eliminado será la fila de la tabla (tr) de la tabla incluida en el formulario (tabla de formularios).
eq(1)
decir que eliminado será el segundo elemento (elemento con número de índice 1)
remove()
di que ese elemento será eliminado.
Pero cuando esto debería usarse en la opción, entonces todo lo necesario sería (por ejemplo):
$(''select option[value="1"]'').remove();
porque es más simple encontrar una opción por valor que por número de índice (a menos que tenga más ioption con el mismo valor, pero no tiene sentido tener tales opciones). El uso del número de índice es bueno si no tiene más que pueda usar para encontrar el elemento eliminado.
También puede, por supuesto, agregar el nombre del formulario o el nombre del formulario y seleccionar el nombre (o id, o clase) en la identificación del elemento
$(''form[name="date"] selection[name="day"] option[value="1"]'').remove();
$(''form#date selection#day option[value="1"]'').remove();
pero la primera opción es mejor, y más lógica, debido a los procesos del lado del servidor, donde necesita usar el nombre del atributo en lugar de id o clase .
Probablemente tengas que eliminar la <option> lugar de "ocultarla". Si no es una solución para ti, intenta inhabilitarla.
document.getElementsByTagName(''option'')[0].disabled=''disabled''
PD: Es posible que desee reconsiderar el uso de getElementsByTagName(''option'') , puede ser complicado si tiene más elementos <select> .
Sé que esto ya es viejo, pero podrías hacerlo, especialmente si estás usando jQuery change parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function sourceListChange() {
var oVisible = $(''#destList'');
var newCategory = $( "#sourceList" ).val()||'''';
var oToShow = $();
oHiddenDestList.append(oVisible.find(''option''));
if (newCategory) {
oToShow = oHiddenDestList.find(''.''+newCategory);
}
if (oToShow.length==0) {
oVisible.append (oHiddenDestList.find(''.NA''));
} else if (oToShow.length!=1) {
oVisible.append (oHiddenDestList.find(''.SELECT''));
}
oVisible.prop(''selectedIndex'', 0);
oVisible.append (oToShow);
}
$(document).ready(function() {
sourceListChange();
});
var oHiddenDestList = $(document.createElement(''select''));
</script>
<style>
</style>
</head>
<body>
Select a parent group:
<select id="sourceList" onchange="sourceListChange()">
<option class="SELECT" value="" selected disabled>Please Select</option>
<option value="veg">Vegetables</option>
<option value="fruit">Fruit</option>
</select>
<select id="destList">
<option class="SELECT" value="*" selected disabled>Please Select</option>
<option class="NA" value="" selected disabled>Not Applicable</option>
<option class="fruit">Apple</option>
<option class="fruit">Bannana</option>
<option class="veg">Carrot</option>
<option class="veg">Pea</option>
</select>
</body>
</html>
Solución:
var ua = navigator.userAgent.toLowerCase();
var check = function(r) { return r.test(ua);};
var isChrome = check(/chrome/);
`
var f=document.getElementById(''select_tag_id'');
f.options[i].style.display=''none'';
if (isChrome) f.size=2;
El cuadro de selección cambió a 2 tamaños (como varios), pero funciona. Este truco no funciona en safari :(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
var theSelect = document.getElementById("theSelect");
var theOption = document.getElementById("theOption");
theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id="theSelect">
<option>1</option>
<option id="theOption">2</option>
<option>3</option>
</select>
<input type="button" onclick="removeIt()" value="remove it!"/>
</body>
</html>
Rápidamente lo hice funcionar simplemente quitándolo de su parentNode ... obviamente esto va a ser un truco.
Trataré de encontrar una mejor solución para ti =)
Por cierto, bienvenido a