セレクトボックス内の特定の要素を選択したときに、その要素と関連するセレクトボックスを追加したい。

Question

htmlとjavascriptで機能の実装を行っています。
セレクトボックス内にある要素をクリックすることで、その要素と関連するセレクトボックスを追加したいのですが、その要素を選択してもセレクトボックスが追加されません。
例えば、セレクトメニュー内にスポーツ・レジャーとあれば、それを選択すると下に見た目が同じセレクトボックスが出現し、そのセレクトボックスのメニュー内にスポーツ・レジャーに関連するもの（ゴルフ、自転車、テニスなど）が出現する。
初心者のため、上手く伝えられているか分かりませんが、ご教授お願いします。

該当のソースコード

<div class="form-group", id="delivery">
  <label>配送料の負担
    <span class="form-require">必須</span>
  </label>
  <div class="select-wrap">
    <select class="select-default">
      <option value="">---</option>
      <option value="1", id="select-pay">送料込み(出品者負担)</option>
      <option value="2">着払い(購入者負担)</option>
    </select>
    <%= fa_icon "angle-down" %>
  </div>
</div>

$(function(){
  function buildSEND(send){
    var html = `<div class="form-group">
                  <label>配送の方法
                    <span class="form-require">必須</span>
                  </label>
                  <div class="select-wrap">
                    <select class="select-default">
                      <option value="">---</option>
                      <option value="3">未定</option>
                      <option value="4">らくらくメルカリ便</option>
                      <option value="5">ゆうメール</option>
                      <option value="6">レターパック</option>
                      <option value="7">普通郵便(定形、定形外)</option>
                      <option v2alue="8">クロネコヤマト</option>
                      <option value="9">ゆうパック</option>
                      <option value="10">クリックポスト</option>
                      <option value="11">ゆうパケット</option>
                    </select>
                    <i class="fas fa-angle-down"></i>
                  </div>
                </div>`
    return html;
  }

  $('#select-pay').on('click', function(){
    console.log(this)
      var html = buildSEND();
      console.log(html)
      $('#delivery').append(html)
  });
})

試したこと

選択したい要素をid指定してみましたが、option内でid指定しても発火しないようです。

Answer 1

selectのchangeイベントでval拾って、それが特定の値だったときに、
で良いかと。

Comments

[hiromats]

on()メソッド内のclickをchangeに変えて、#select-payから.select-defaltに変え、option内のvalue値を取得してからif文で別けたら上手くいきました。
ありがとうございます。

[m.ts10806]

解決したようで何よりです
optionは子要素なので単体のイベントは取りにくいのかなと。少なくとも「クリックされた」は親要素で発生するイベントなので、ユーザーは子要素をクリックしたつもりでも実際は親要素をchangeしたclickした、で認識されます。
clickでもイベントは取れなくもないですが子要素を選択する前に発火するので正しく選択子要素がとれないことがほとんどです。

[hiromats]

ご丁寧に発火しなかった理由まで解説していただいてありがとうございます。
解説されるまで発火しなかった原因は分からなかったのですが、親要素と子要素が関連していたんですね。
勉強になります。