17

これは私が取り組んでいる例です：http：//jsfiddle.net/4suwY/5/

HTML：

<select id="asd">
    <option>hello</option>
    <option>I'M THE CHOSEN ONE</option>
    <option>asd</option>
    <option>wer</option>
    <option>qwe</option>
</select>

JS：

var sel = document.getElementById("asd");
var optnz = sel.getElementsByTagName("option")[1];
sel.value = optnz.value;
optnz.style.display = "none";

ご覧のとおり、Chromeでは機能しますが、Safariでは機能しません。ドロップダウンメニューをクリックすると、[I'MTHECHOSENONE]オプションが非表示になります。

これは私が行った別のテストです：http：//jsfiddle.net/4suwY/11/

同じHTML、これはJSです：

var sel = document.getElementById("asd");
var opt = document.createElement("option");
opt.innerHTML = "YAYA";
opt.value = "YAYA";
sel.appendChild(opt);
sel.value = "YAYA";
opt.style.display = "none";

とにかく、私がする必要があるのは、選択された（現在の）オプションを表示し、ドロップダウンメニューが開いたときにユーザーに非表示にすることです。そのため、ユーザーはそれを選択できません。

何か提案/回避策はありますか？エラーは表示されません。Safariの何が問題になっていますか？アプローチを変更する必要がありますか？Jqueryは役に立たないようです。

編集：

ドロップダウンメニューのオプションを非表示にする必要がありますが、同時に、このオプションの「値」を選択した値として表示する必要があります。たとえば、「閉じる」ドロップダウンには「I'M THE CHOSEN ONE」という値が表示されますが、メニューをクリックして開くと、表示されるオプションは「hello、asd、wer、qwe」のみになります。

4

1 に答える 1

37

<option>Safari（またはIE）の要素の表示を切り替えることはできません。これは、Safariがフォーム要素のCSSスタイリング機能を制限するという長く一貫性のない伝統の一部であり、インタラクティブ要素の視覚言語はOSと一致している必要があると信じています（IEの失敗の論理的根拠を見つけようとしても意味がありません）。

唯一のオプションは、それを削除する（そして後で再追加する）か、に設定することoptnz.disabled = trueです。悪い知らせでごめんなさい！

于 2013-02-22T14:03:54.727 に答える