依赖jQuery的下拉菜单在模式

Question

我的从属下拉菜单可在其他单个PHP文件中使用。

但是当我重复使用相同的依赖下拉菜单时，它会出现在Bootstrap Modals中。尽管我在Bootstrap Modal的php页面中包含了jQuery库，但所有相关的下拉菜单都不会显示。

我该如何解决？

/*Dependency of Upload Data Type Menu*/

$('#up_category').on('change', function() {
  upCategoryType=$(this).val();
  if (upCategoryType=='Document') {
    $('#sd9').show();
    $('#api9').hide();
  }
  else if (upCategoryType=='API') {
    $('#api9').show();
    $('#sd9').hide();
  }
  else if (upCategoryType=='Select Date Type') {
    $('#sd9').hide();
    $('#api9').hide();
  }
}

);
$('#sd9').hide();
$('#api9').hide();

<div class="modal fade" id="add_data_Modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" id="insert_form2" enctype="multipart/form-data">
        <div class="card-body " style="background-color:#F8F9F9">
          <div class="form-group row pl-3 my-2">
            <label class="col-lg-3 col-form-label form-control-label">Type</label>
            <div class="col-lg-9">
              <select id="up_category" name="up_category" class="form-control" size="0">
                <option value="Select Date Type">Select Date Type</option>
                <option value="Document">Document</option>
                <option value="API">API</option>
              </select>
            </div>
          </div>
          <!-- if selection is Document-->
          <div id="sd9">
            <div class="form-group row pl-3 my-2">
              <label class="col-lg-3 col-form-label form-control-label">Document</label>
              <div class="col-lg-9">
                <select class="form-control" name="up_type" id="up_type" size="0">
                  <option value="PDF">PDF</option>
                  <option value="ZIP">ZIP</option>
                  <option value="RAR">RAR</option>
                  <option value="SHP">SHP</option>
                  <option value="UDB">UDB</option>
                </select>
              </div>
            </div>
          </div>
          <!-- end-->

          <!-- if selection is API-->
          <div id="api9">
            <div class="form-group row pl-3 my-2">
              <label class="col-lg-3 col-form-label form-control-label">API</label>
              <div class="col-lg-9">
                <input class="form-control" type="text" value="" name="up_type">
              </div>
            </div>
          </div>
          <!-- end-->

        </div>
      </form>

    </div>
  </div>
</div>