セレクトボックス内にモーダルを表示する為のボタンを配置する方法について

Question

BootStrapを使用し、セレクトボックスのある値を選択したら、モーダルが表示されるように実装したいのですが、うまくいかない状況です。
具体的には、下記のコードにおきまして、セレクトボックスのoptionにモーダルを表示するためのボタンを設置したのですが、ボタンクリック後もモーダルが表示されない状況です。
また、少々別の問題にもなってしまうのですが、何故か、<i class="bi bi-search"></i>ここの部分で検索アイコンを指定しているのですが、アイコンの表示が行われませんでした。
こちら２点の箇所につきまして、どなたか少々ご助言の程頂けましたら幸いです。

 <div class="col-2">
        <select id="account" class="selectpicker form-control" title="test" data-style-base="form-control" data-live-search="true" data-live-search-placeholder="検索">
          <option></option>
          <option data-tokens="">test1</option>
          <option data-tokens="">test2</option>
          <option data-tokens="">
            <i class="bi bi-search"></i>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
              Bootstrap modal
            </button>
          </option>
        </select>
      </div>
      <div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h3 class="modal-title" id="modalLabelId">modal title</h3>
                  </div>
                  <div class="modal-body">
                      <label>mobal body</label>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">OK</button>
                  </div>
              </div>
          </div>
      </div>

Answer 1

<option> の中にはタグを入れることはできません。テキストだけ入れられます。CSSでボタンっぽい見た目にするのもほぼ無理です。

見た目をボタンにするのを諦めてchange イベントでなんとかするか、<select>を使うのを諦めるしかありません。

Comments

[jjj001]

毎度、ご回答頂きましてありがとうございます。
> <option> の中にはタグを入れることはできません。テキストだけ入れられます。
こちら、そうだったのですね...
勉強になりました。

>見た目をボタンにするのを諦めてchange イベントでなんとかするか、<select>を使うのを諦めるしかありません。
ありがとうございます
こちら、検討してみます