style.display ='none' не работает над тегами опций в хроме, но он делает в Firefox
хорошо, вот некоторый пример кода, который демонстрирует проблему. если я нажимаю кнопку в Firefox, первая опция исчезает. если я нажимаю кнопку в хроме, ничего не происходит, или скорее если я осматриваю первую опцию, это действительно имеет атрибут, "разрабатывают ='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>
почему это не работает в хроме?
4 ответа
Если вы хотите сопоставить последовательность с другим regex, убедившись, что нет строчных букв, вы можете использовать положительный просмотр вперед.
^(?=[^a-z]*$)MORE_REGEX$
Например, чтобы убедиться, что первый и последний символы являются буквенно-цифровыми:
^(?=[^a-z]*$)[A-Z0-9].*[A-Z0-9]$
<!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
-121--1286035- Обходной путь состоит в том, чтобы удалить элементы опции в ответ на событие и добавить их обратно, если они необходимы. IIRC, IE не позволяет установить для display значение none в элементах опции . Я бы посоветовал хранить удаленные элементы в массиве, чтобы можно было легко добавить их обратно в.
Вопрос скорее в том, почему это работает в в любом браузере?
Параметры не используются в качестве элементов на странице, они содержат информацию, отображаемую в элементе выбора. Некоторые браузеры позволяют применять некоторые стили к параметрам, но в целом вы не можете рассчитывать на кроссбраузерную поддержку каких-либо стилей.
Если вы хотите, чтобы параметр не отображался, вам просто нужно удалить его из выбора.
<!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
Вам, вероятно, придется удалить вместо того, чтобы «скрывать» его. Если это не решение для вас, попробуйте отключить его.
document.getElementsByTagName('option')[0].disabled='disabled'
PS: Возможно, вы захотите пересмотреть использование getElementsByTagName ('option') , это может стать беспорядочным, если у вас есть больше элементов .