如何为jQuery Select2多选下拉框添加用药频次列

需求描述 #

我使用jQuery Select2 JS库实现了一个医疗药品的多选下拉表单，列表项为各类药品。我希望为每个选中的药品添加新列，用于填写患者在「早晨」「傍晚」「夜晚」的用药次数，同时添加列标题。

更新1 - 最终效果预览 #

期望的最终效果是一个结构化表格：

• 顶部包含列标题：药品名称、早晨、傍晚、夜晚
• 每选中一个药品，表格自动新增一行，左侧显示药品名称，右侧对应三个输入框，分别用于填写该时段的用药次数

更新2 - 初始代码 #

HTML代码 #

<div class="symptoms drugs">
<div class="col-lg-4 mg-b-20 mg-lg-b-0" style="width: 100%; padding-left: 0">
  <div class="d-flex align-items-center">
    <h3 class="diagnose_heading custom_heading" style="margin-bottom: 1rem; margin-top: 1rem">
      药品选择:
    </h3>
    <span class="tx-danger span_required">(*) 必填项</span>
  </div>
  <select class="form-control select2" multiple="multiple" style="width: 100%" name="symptoms[]">
    <option value="1">药品名称1</option>
    <option value="2">药品名称2</option>
    <option value="3">药品名称3</option>
    <option value="4">药品名称4</option>
    <option value="5">药品名称5</option>
  </select>
</div>
</div>

JavaScript代码 #

<script src="jquery.min.js"></script>
<script src="select2.js"></script>
<script>
    var items = $(".select2").find(":selected");
    $(".select2").select2({
      // 其他配置项
      templateSelection: function (data, container) {
        // 为选中的选项添加自定义属性到<option>标签
        $(data.element).attr("data-custom-attribute", data.customValue);
        return data.text;
      },
    });
</script>

CSS代码 #

<link rel="stylesheet" href="select2.min.css" />
<style>
    .select2-container {
      width: 100% !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
      float: left !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
      left: auto !important;
      right: 0 !important;
    }

    .symptoms .select2-container {
      width: 76.5vw !important;
    }

    .drugs .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      display: flex;
      padding: 0.3rem 0.5rem 0.5rem !important;
      flex-direction: column;
      cursor: pointer;
    }

    .drugs .select2-container--default .select2-selection--multiple .select2-selection__choice {
      float: none;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      font-size: 1rem !important;
      top: 2px !important;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
      width: 76.5vw !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      width: 100% !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
      padding-left: 2rem !important;
    }

    .symptoms {
      position: relative;
    }

    .symptoms::before {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-image: url("/assets/img/patterns/04.png");
      opacity: 0.3;
      background-size: contain;
    }

    .initial_diagnose label {
      position: relative;
    }

    .initial_diagnose label::before {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-image: url("/assets/img/patterns/04.png");
      opacity: 0.3;
      background-size: cover;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      float: left !important;
      background-color: #1199eec7 !important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #1199eec7 !important;
    }

</style>

内容的提问来源于stack exchange，提问作者Mohamed Zaki