jQuery Select2多选组件匹配填充对应日期的问题求助

问题场景 #

从数据库加载选项C、D、E，对应日期为['2023-12-01', '2023-12-02', '2023-12-03']，新增选择B这类选项时，E对应的日期会被打乱或置空。需要实现：无论Select2选项顺序如何，新增选项时自动按原始选项顺序排列，原有选项日期保留，新选项日期为空。例如当前选中C、D、F，添加E后呈现C、D、E、F，对应日期为['2023-12-01', '2023-12-02', '', '2023-12-03']。

问题根源 #

原代码通过数组索引绑定日期与选项，当选项顺序变化或新增选项时，索引对应关系断裂，导致日期错乱；同时选中项的排序逻辑依赖历史选中顺序，无法保证按原始选项顺序排列。

解决方案代码 #

JavaScript #

$('#remarks-list').val([3,4,5]).trigger('change');
let clicked_id = 0;
let status_val =0;
let formattedDates = ''
let employeeList = [];

let selectedRemarks = [];
let remarksDateMap = {};

$(function () {
    $('select').each(function () {
        $(this).select2({
            theme: 'bootstrap4',
            width: 'style',
            placeholder: $(this).attr('placeholder'),
            allowClear: Boolean($(this).data('allow-clear')),
        });
    });
});

$(document).ready(function () {
    // 初始化：将数据库返回的日期与选项value绑定，替代数组索引关联
    const initialDateMap = {
        '3': '2023-12-01', // C对应的日期
        '4': '2023-12-02', // D对应的日期
        '5': '2023-12-03'  // E对应的日期
    };
    Object.assign(remarksDateMap, initialDateMap);

    $(".remarks-list").on("change", function() {
        $("#dynamic-input-container").empty();
        selectedRemarks = $(this).val() || [];

        if (selectedRemarks.length > 0) {
            // 获取原始select中所有有效选项的value顺序
            const originalOptionValues = $(this).find('option').map(function() {
                return $(this).val();
            }).get().filter(val => val !== '');
            
            // 按照原始选项顺序排序选中项
            const sortedSelectedRemarks = originalOptionValues.filter(val => selectedRemarks.includes(val));

            sortedSelectedRemarks.forEach(selectedRemark => {
                const inputId = "date-remarks-" + selectedRemark;
                const selectedText = $(this).find('option[value="' + selectedRemark + '"]').text();
                // 从映射中获取对应日期，新选项默认为空
                const inputValue = remarksDateMap[selectedRemark] || "";
                const inputElement = `<label class="form-label">Date for <b>${selectedText}</b></label> <input type="date" id="${inputId}" name="DateRemarks" class="form-control" value="${inputValue}" /><br>`;
                $("#dynamic-input-container").append(inputElement);
            });
        }
    });

    $("#dynamic-input-container").on("change", 'input[type="date"]', function() {
        const inputId = $(this).attr("id");
        const selectedRemark = inputId.replace("date-remarks-", "");
        remarksDateMap[selectedRemark] = $(this).val();
    });
})

CSS #

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  background: #fafafa;
  color: #444444;
}

.wrapper {
  max-width: 75%;
  margin: auto;
}

h3 {
  color: #000000;
  margin: 40px 0;
  padding: 0;
  font-size: 28px;
  text-align: center;
}

select {
  width: 100%;
  min-height: 100px;
  border-radius: 3px;
  border: 1px solid #444;
  padding: 10px;
  color: #444444;
  font-size: 14px;
}

HTML #

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet">

<div class="col-12">
    <label>假设这是编辑场景，数据库返回选项<b>C,D,E</b>，对应日期为<b>['2023-12-01', '2023-12-02', '2023-12-03']</b></label> <br> <br>
        <select id="remarks-list" name="RemarksList" class="select2 form-select remarks-list" style="width: 100px; height: 200px;" multiple>
            <option></option>
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
            <option value="4">D</option>
            <option value="5">E</option>
        </select>
    <span id="remarks_error" style="color: red;"></span>
</div>

<div class="col-sm-12">
    <br>
    <div id="dynamic-input-container"></div>
</div>

关键修改点 #

1. 日期存储优化：用remarksDateMap对象替代数组，以选项value为key绑定日期，彻底摆脱索引依赖，保证绑定关系稳定。
2. 选中项排序逻辑：每次选项变化时，按照原始select中option的顺序重新排序选中项，确保新增选项自动插入到正确位置。
3. 输入框渲染逻辑：从映射中获取对应日期，新选项默认为空，原有选项日期保留，避免错乱。

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