[CSS] [jQuery] option要素をdisplay:noneで非表示にする方法（Safari対応）

管理者

1年前

概要
解決方法
連動プルダウン

概要

<option style="display:none">hoge</option>とするとoption要素を非表示にすることができるが、Safariでは表示されてしまう。

解決方法

<span style="display:none"><option>hoge</option></span>のようにoption要素をラップしたspan要素をdisplay:noneとすることで、Safariでも非表示にすることができる。

連動プルダウン

プルダウンで選択したものはもう一方のプルダウンからは削除する場合、以下のようなjQueryとなる。
wrapメソッドを使ってspan要素でoption要素を囲み、unwrapメソッドでspan要素を削除している。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <select name="message[]">
      <option></option>
      <option>aaa</option>
      <option>bbb</option>
      <option>ccc</option>
      <option>eee</option>
      <option>fff</option>
    </select>
    <select name="message[]">
      <option></option>
      <option>aaa</option>
      <option>bbb</option>
      <option>ccc</option>
      <option>eee</option>
      <option>fff</option>
    </select>
    <select name="message[]">
      <option></option>
      <option>aaa</option>
      <option>bbb</option>
      <option>ccc</option>
      <option>eee</option>
      <option>fff</option>
    </select>
    <script>
      $('select[name="message[]"]').on("change", () => {
        let selectedValues = [];
        $('select[name="message[]"] option:selected').each((index, option) => {
          if ($(option).val() !== "") {
            selectedValues.push($(option).val());
          }
        });
        $('select[name="message[]"] span option').each((index, option) => {
          $(option).unwrap();
        });

        $('select[name="message[]"').each((index, select) => {
          $(select)
            .children("option")
            .each((index, option) => {
              if ($.inArray($(option).val(), selectedValues) !== -1 && $(select).val() !== $(option).val()) {
                $(option).wrap('<span style="display:none"></span>');
              }
            });
        });
      });
    </script>
  </body>
</html>