[英]style.display='none' doesn't work on option tags in chrome, but it does in firefox
好的,这是一些演示问题的示例代码。 如果我单击 Firefox 中的按钮,第一个选项就会消失。 如果我单击 chrome 中的按钮,没有任何反应,或者更确切地说,如果我检查第一个选项,它确实具有属性“style='display:none'”,但 html 页面上的选项本身并未隐藏。
<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>
为什么这在 chrome 中不起作用?
解决方法是删除option
元素以响应您的事件,并在需要时将它们添加回来。 IIRC,IE 不允许您将option
元素的display
设置为none
。 我建议将删除的元素存储在一个数组中,以便您可以轻松地将它们添加回来。
您可能必须删除<option>
而不是“隐藏”它。 如果这不是您的解决方案,请尝试禁用它。
document.getElementsByTagName('option')[0].disabled='disabled'
PS:您可能需要重新考虑使用getElementsByTagName('option')
,如果您有更多<select>
元素,可能会变得混乱。
<!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>
我很快就通过简单地将它从其 parentNode 中删除来让它工作......显然这将是一个黑客。
我会尽力为您找到更好的解决方案 =)
顺便说一句,欢迎来到 Stack Overflow
要从选择表单中删除一个选项,可以使用 jQuery 的 $().eq().remove() 或 $().remove()。
类似的是我从表中删除了一个表行:
$('form table tr').eq(1).remove();
在哪里:
$('form table tr')
说删除的元素将是表格(表格表格)中表格中的表格行(tr)。
eq(1)
说删除的将是第二个元素(索引号为 1 的元素)
remove()
说该元素将被删除。
但是当这应该用于选项时,那么所有需要的是(例如):
$('select option[value="1"]').remove();
因为按值查找选项比按索引号更简单(除非您将有更多具有相同值的 ioption - 但拥有此类选项是无稽之谈)。 如果您没有其他可用于查找已删除元素的索引号,则使用索引号是很好的。
当然,您也可以在元素标识中添加表单名称或表单名称并选择名称(或 ID 或类)
$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();
但是第一个选项更好 - 而且更合乎逻辑,因为服务器端进程,您需要使用属性名称而不是id或class 。
问题是为什么这在任何浏览器中都有效?
这些选项不用作页面中的元素,它们包含要在选择元素中显示的信息。 某些浏览器允许您将某些样式应用于选项,但通常您根本无法真正期望跨浏览器支持任何样式。
如果您想不显示某个选项,只需将其从选择中删除即可。
因为我的解决方案是 (asp.net),所以我会尝试这样做。
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
}
}
我知道这现在已经过时了,但是您可以 - 特别是如果您使用 jQuery 更改父级。
<!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>
解决方案:
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;
选择框更改为 2 大小(如多个),但有效。 这个技巧在 safari 下不起作用:(
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.