使用bootstrap 开发多选下拉框，移除不符合要求的选项

笔记：

// 初始化previous-values
$(document).ready(function() {
    $('#jobRiskAnalysisId').data('previous-values', $('#jobRiskAnalysisId').val());
});

// 假设你有一个多选<select>元素  
$('#jobRiskAnalysisId').on('change', function() {  
    var $select = $(this);  
    var previousValues = $select.data('previous-values') || []; // 从data属性中获取之前的值（如果是第一次，则为空数组）  
    var currentValues = $select.val(); // 获取当前所有选中的值  
  
    // 找出新增和移除的选项  
    var addedValues = currentValues.filter(function(value) {  
        return previousValues.indexOf(value) === -1;  
    });  
  
    var removedValues = previousValues.filter(function(value) {  
        return currentValues.indexOf(value) === -1;  
    });  
  
    // 假设我们只对新增的选项感兴趣  
    if (addedValues.length > 0) {  
        // 这里我们只处理第一个新增的选项，如果你想处理所有新增的，可以遍历addedValues数组  
        var newlySelectedValue = addedValues[0];  
        console.log('新选中的值是：', newlySelectedValue);  
  
        // 如果你还想处理移除的选项，可以在这里添加逻辑  
        // ...  
    }  
  
    // 更新data属性以保存当前的值，供下次change事件使用  
    $select.data('previous-values', currentValues);  
});  
  
// 注意：如果页面加载时<select>已经有一些选项被选中，  
// 你可能需要在页面加载时设置'previous-values'的初始值。  
// 这可以通过在DOM加载完毕后立即读取$select.val()并将其存储在data属性中来完成。  
$(document).ready(function() {  
    $('#jobRiskAnalysisId').data('previous-values', $('#jobRiskAnalysisId').val());  
});

$('#jobRiskAnalysisId').on('change', function() {  
    // 初始化一个字符串来存储所有选中的值的ID（或值），假设这里是ID  
    let jobRiskAnalysisCheckedIds = "";  
  
    // 获取所有选中的<option>的值（在multi-select中，这将是一个数组）  
    var selectedOptions = $(this).val();  
  
    // 检查是否有任何选项被选中  
    if (selectedOptions.length < 1) {  
        // 如果没有选中任何选项，你可以在这里处理这种情况  
        // 例如，显示一个错误消息或重置其他表单字段  
        console.log("没有选中任何风险分析类型");  
    } else {  
        // 如果有选中的选项，你可以遍历它们或将它们连接成一个字符串  
        // 这里我们假设你想要将它们连接成一个由逗号分隔的字符串  
        jobRiskAnalysisCheckedIds = selectedOptions.join(",");  
  
        // 现在你可以使用jobRiskAnalysisCheckedIds变量了  
        // 例如，显示选中的值，发送到服务器等  
        console.log("选中的风险分析类型ID有：" + jobRiskAnalysisCheckedIds);  
    }  
  
    // 注意：如果你的<select>元素与某个selectpicker插件（如Bootstrap-select）绑定，  
    // 你可能需要在修改DOM或选项后调用插件的refresh方法来更新UI。  
    // 但在这个例子中，我们只是简单地读取了值，并没有修改DOM，  
    // 所以通常不需要调用refresh方法（除非你有其他操作改变了选项）。  
});

以下代码实现的功能是，选择风险分析时，要联动风险措施等字段，如果选择的风险分析没有维护风险措施信息，则选择的风险分析不会被选择，不会被显示在页面上

上完整代码（js部分）：

  $('#jobRiskAnalysisId').on('change', function() {

            var $select = $(this);
            var previousValues = $select.data('previous-values') || []; // 获取之前选中的值
            var currentValues = $select.val(); // 获取当前选中的值
            $select.data('previous-values', currentValues);
            var selectedLabels = []; //  选择的文本内容，移除时候，也要移除页面上显示的文本内容
            $('#jobRiskAnalysisId option:selected').each(function() {
                // $(this).text() 获取当前<option>的文本内容（即dictLabel的值）
                selectedLabels.push($(this).text());
            });
            //获取新增的值
            var addedValues = currentValues.filter(function(value) {
                return previousValues.indexOf(value) === -1;
            });
            selectjobRiskControlMeasures(addedValues[0],$select,previousValues,currentValues,selectedLabels)

        });

        function selectjobRiskControlMeasures(methodId,$select,previousValues,currentValues,selectedLabels){
           /* document.getElementById('jobStep').value ="";
            document.getElementById('jobRiskControlMeasuresInfo').value ="";*/
            var url = "/nmeqit/v1/worksafetyinfo/selectjobRiskControlMeasures"
            var data = {};
            data.methodId=methodId;
            $.ajax({
                url: url,
                data: JSON.stringify(data),
                dataType:"JSON",
                cache: false,
                contentType: "application/json",
                processData: false,
                type: 'POST',
                success: function (result) {
                    let info1=[];
                    let info=[];
                    let idInfo=[];

                    if(result.data.length>0){
                        for(var i=0;i<result.data.length;i++){
                            info.push( result.data[i].jobRiskControlMeasures);
                            info1.push( result.data[i].jobStep);
                            idInfo.push(result.data[i].id);
                        }
                        if(info1.length>1){
                            document.getElementById('jobStep').value = info1.join("\n");
                        }else {
                            document.getElementById('jobStep').value = info1[0];
                        }
                        if(idInfo.length>1){
                            document.getElementById('jobRiskControlMeasures').value = idInfo.join(",");
                        }else {
                            document.getElementById('jobRiskControlMeasures').value = idInfo[0];
                        }
                        if(info.length>1){
                            document.getElementById('jobRiskControlMeasuresInfo').value = info.join("\n");
                        }else {
                            document.getElementById('jobRiskControlMeasuresInfo').value = info[0];
                        }
                    }else{
                        $.modal.alertWarning("当前选择的风险分析没有维护作业风险控制措施，请到管理系统中维护。");
                        // 如果需要“移除”新增的选项，即恢复到之前的状态
                            // 注意：这里我们假设没有“撤销”按钮，只是直接恢复
                            $select.val(previousValues); // 将选中项设置回之前的状态
                            // 可选：如果你想要在用户界面上给用户一些反馈
                           // alert('已撤销更改，并恢复到之前的选择。');
                            // 更新当前值，以便下次change事件能够正确地识别“新增”和“移除”
                            $select.data('previous-values', previousValues);
                            $('#jobRiskAnalysisId').selectpicker('refresh');
                            console.log(currentValues);
                            console.log(previousValues);
                    }

                }
            })

        }

代码有些冗余，大神看到了，烦请下手指点，双手合十