web-dev-qa-db-ja.com

style.display = 'none'はchromeのオプションタグでは機能しませんが、firefoxでは機能します

oK、問題を示すサンプルコードをいくつか示します。 firefoxでボタンをクリックすると、最初のオプションが消えます。クロムでボタンをクリックしても何も起こりません。または、最初のオプションを調べると、属性「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>

なぜこれはクロムで動作しないのですか？

javascriptfirefoxcoding-stylegoogle-chrome
35
user280109

回避策は、イベントに応じてoption要素を削除し、必要に応じてそれらを追加し直すことです。 IIRC、IEでは、display要素にnoneをoptionに設定することはできません。削除された要素を簡単に追加できるように配列。

23
Russ Cam

_<option>_を '非表示'ではなく削除する必要があるでしょう。それが解決策でない場合は、無効にしてみてください。

_document.getElementsByTagName('option')[0].disabled='disabled'
_

PS：_<select>_要素がさらにある場合、getElementsByTagName('option')を使用して再考したい場合があります。

7
o.k.w
<!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へようこそ

2
Warty

私の解決策は（asp.net）なので、その方法でそれをやろうとします。

  1. Dropdowlistを作成すると、すべてのListItemが作成されます
  2. Javascriptを使用してListItemを追加または削除します（注：追加オプションには、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
nguyencaoan

問題は、それがどのブラウザーでも動作するのかということです。

オプションはページの要素としては使用されず、select要素に表示する情報が含まれます。一部のブラウザでは、オプションにいくつかのスタイルを適用できますが、一般的に、どのスタイルのクロスブラウザサポートもまったく期待できません。

オプションが表示されないようにするには、選択から削除するだけです。

1
Guffa

選択フォームから1つのオプションを削除するには、jQueryの$（）。eq（）。remove（）または$（）。remove（）を使用できます。

同様に、テーブルから1つのテーブル行を削除しました：

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

どこ：

$('form table tr')

削除された要素は、フォーム（form table）で囲まれたテーブルからテーブル行（tr）になると言います。

eq(1)

削除されるのは2番目の要素（インデックス番号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();

しかし、最初のオプションの方が優れています。サーバー側のプロセスのため、より論理的です。代わりに属性nameを使用する必要がありますidまたはclass 。

1
Václav

解決：

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
Attila Molnár

私はこれが今では古いことを知っていますが、特に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>
0
Denzil Newman