style.display = 'none' не работает с тегами параметров в Chrome, но работает в Firefox - PullRequest
Новая
       19

style.display = 'none' не работает с тегами параметров в Chrome, но работает в Firefox

35 голосов
/ 24 февраля 2010

хорошо, вот пример кода, который демонстрирует проблему. если я нажимаю кнопку в 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?

Ответы [ 8 ]

23 голосов
/ 24 февраля 2010

Обходной путь - удалить элементы option в ответ на ваше событие и добавить их обратно, если и когда они необходимы. IIRC, IE не позволит вам установить display в none для option элементов. Я бы посоветовал хранить удаленные элементы в массиве, чтобы вы могли легко добавить их обратно.

6 голосов
/ 24 февраля 2010

Вы, вероятно, должны удалить <option> вместо того, чтобы «скрывать» его. Если это не решение для вас, попробуйте отключить его. 

document.getElementsByTagName('option')[0].disabled='disabled'

PS: Возможно, вы захотите пересмотреть, используя getElementsByTagName('option'), можете запутаться, если у вас больше элементов <select>.

2 голосов
/ 24 февраля 2010 
<!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

1 голос
/ 03 февраля 2014

Для удаления одной опции из формы выбора может быть использовано jQuery's $ (). Eq (). Remove () или $ (). Remove ().

Аналогично было мое удаление одной строки таблицы из таблицы: 

$('form table tr').eq(1).remove();

где: 

$('form table tr')

говорят, что удаленный элемент будет строкой таблицы (tr) из таблицы, заключенной в форму (таблицу форм). 

eq(1)

скажем, что удаленным будет второй элемент (элемент с индексом 1) 

remove()

говорят, что элемент будет удален.

Но когда это следует использовать для опции, тогда все необходимое будет (например): 

$('select option[value="1"]').remove();

потому что проще найти опцию по значению, чем по номеру индекса (если только у вас не было бы большего числа вариантов с тем же значением - но глупо иметь такие опции). Использование индексного номера хорошо, если у вас нет ничего другого, что вы можете использовать для поиска удаленного элемента.

Также вы можете, конечно, добавить имя формы или имя формы и выбрать имя (или идентификатор, или класс) в идентификации элемента 

$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();

, но первый вариант лучше - и более логичен из-за процессов на стороне сервера, где вам нужно использовать атрибут name вместо id или class .

1 голос
/ 06 октября 2011

Поскольку мое решение (asp.net), я постараюсь сделать это таким образом.

  1. Создать выпадающий список будут все ListItems
  2. Использование javascript для добавления или удаления ListItems (Примечание: для опции add требуется то же значение и текст в элементах asp: dropdownlist) 
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
    }
}
1 голос
/ 24 февраля 2010

Вопрос скорее в том, почему это вообще работает в любом браузере?

Опции не используются в качестве элементов на странице, они содержат информацию, отображаемую в элементе select. Некоторые браузеры позволяют применять некоторые стили к опциям, но, как правило, вы вообще не можете ожидать кросс-браузерную поддержку для любых стилей.

Если вы хотите, чтобы опция не отображалась, вам просто нужно удалить ее из выбора.

0 голосов
/ 24 февраля 2015

Решение: 

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 размера (например, несколько), но работает. Этот трюк не работает в сафари: (

0 голосов
/ 11 ноября 2014

Я знаю, что это уже старое, но вы могли бы - особенно если вы используете 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>
...