web-dev-qa-db-ja.com

optgroup / option要素を非表示にする方法は？

optionまたはoptgroup HTML要素を非表示にする方法はありますか？ jQueryでhide()を呼び出し、通常のJavascriptを使用してstyle.display='none'を設定してみました。

Firefoxで動作しますが、他のブラウザでは動作しません。実際にそれらをDOMから削除するdoesは機能するので、削除されたときに各DOM要素を保存し、同じ場所に再挿入する方法があるのではないでしょうか。

私のHTMLは次のようなものです。

<select name="propsearch[area]" id="propsearch_area">
    <option value="0">- Any -</option>
    <optgroup label="Bristol">
        <option  value="Hotwells">Hotwells</option>
        <option  value="Montpelier">Montpelier</option>
    </optgroup>
    <optgroup label="Cardiff">
        <option  value="Heath">Heath</option>
        <option  value="Roath">Roath</option>
    </optgroup>
    <optgroup label="Exeter">
        <option  value="Pennsylvania Road">Pennsylvania Road</option>
        <option  value="Lower North Street">Lower North Street</option>
    </optgroup>
    <optgroup label="Swansea">
        <option  value="Brynmill">Brynmill</option>
        <option  value="Uplands">Uplands</option>
    </optgroup>
</select>
javascriptjqueryhtmloptionoptgroup
29
DisgruntledGoat

私はこの解決策が私にとってうまくいくと思いました：

別の選択を行います。

$("#footer_canvas").after('<select id="parkingLot"></select>');

それからそれを隠す

$("#parkingLot").hide();

いくつかのオプトグループを「非表示」にしたい場合は、この非表示の選択に「パーク」するだけです。

$('#VehicleVehicleCategoryId optgroup[label="kategorie L"]').appendTo("#parkingLot");

あなたがそれを見えるようにすることができるのと同じ方法。これは私のソリューションのほんの一部であり、私にとっては問題なく機能します。

11
Vlado Tovarnak