style.display='none' doesn't work on option tags in chrome, but it does in firefox
ok, heres some sample code that demonstrates the problem. if i click the button in firefox, the first option disappears. if i click the button in chrome, nothing happens, or rather if i inspect the first option, it does have the attribute "style='display:none'" but the option itself on the html page is not hidden.
<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName('opt开发者_StackOverflow社区ion')[0].style.display='none'" value="hide option 1">
</form>
why doesn't this work in chrome?
The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.
You probably have to remove the <option> instead of 'hiding' it. If it's not a solution for you, try disabling it.
document.getElementsByTagName('option')[0].disabled='disabled'
PS: You might want to reconsider using getElementsByTagName('option'), can get messy if you have more <select> elements.
<!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>
I quickly got it working by simply removing it from its parentNode... obviously this is going to be a hack.
I'll try to find a better solution for you =)
By the way, welcome to Stack Overflow
The question is rather why that works in any browser at all?
The options are not used as elements in the page, they contain the information to show in the select element. Some browsers let you apply some styles to the options, but generally you can't really expect cross browser support for any styles at all.
If you want to keep an option from being displayed, you just have to remove it from the select.
For deleting of one option from select form may be used jQuery's $().eq().remove() or $().remove().
Similar was my deleting of one table row from table:
$('form table tr').eq(1).remove();
where:
$('form table tr')
say that removed element will be table row (tr) from table enclosed in form (form table).
eq(1)
say that removed will be the second element (element with index number 1)
remove()
say that element will be removed.
But when this should be used on option, then all needed would be (for example):
$('select option[value="1"]').remove();
because it is simplier to find option by value than by index number (unless you would have more ioption with the same value - but it is nonsense, to have such options). Using of index number is good if you have not any else that you may use to find removed element.
Also you may, of course, add form name or form name and select name (or id, or class) into element identification
$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();
but the first option is better - and more logical, due to server-side processes, where you need to use attribute name instead id or class.
As my solution is (asp.net), I will try to do it by that way.
- Create a dropdowlist will all ListItems
- Using javascript to add or remove ListItems (Note: add option need same value and text in asp:dropdownlist items)
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
}
}
I know this is now old, but you could - especially if you are using 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>
Solution:
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;
The select box changed to 2 size (like multiple), but working. This trick don't working under safari :(
加载中,请稍侯......
精彩评论