解决JavaScript报错str.replace is not a function 实现Bootstrap多选下拉值替换

错误根因 #

jQuery 获取带multiple属性的下拉框值时，$('#select_multiple').val()返回的是所有选中值组成的数组，不是字符串类型。replace是字符串专属方法，数组不存在该方法，因此触发报错。
你通过alert能看到有效值，是因为alert方法会自动将传入的非字符串参数做隐式toString转换，数组隐式转换后会呈现为逗号拼接的字符串形式，让你误以为拿到的是字符串类型的值。

修复方案 #

调整check_value函数逻辑，先遍历数组替换目标值，再将处理后的数组拼接为逗号分隔的字符串即可，修改后的代码如下：

$('#select_multiple').multiselect()
var data="cheese,mushrooms";
var dataarray=data.split(",");
$("#select_multiple").val(dataarray);
$("#select_multiple").multiselect("refresh");   

function check_value(){
    // 获取选中值数组
    var selectArr = $('#select_multiple').val();  
    // 遍历替换cheese为jam
    var processedArr = selectArr.map(item => item === 'cheese' ? 'jam' : item);
    // 拼接为逗号分隔的字符串
    var result = processedArr.join(',');
    console.log(result);
}

效果验证 #

当你选中Cheese、Tomatoes、Mushrooms三个选项时，控制台会输出你期望的jam,tomatoes,mushrooms。

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency