无法从 select2 获取 JSON 值答案

【问题标题】：Unable to get the JSON value from select2无法从 select2 获取 JSON 值
【发布时间】：2020-09-17 07:14:22
【问题描述】：

我正在使用 select2 动态

使用下面的代码，内部值被视为字符串

我得到 {"rooms":["Aerary,false"]}（错误）

预期为：{"rooms":["Aerary",false]}（正确）

这是我尝试过的

<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

  <label for="rooms"><b>Choose rooms</b></label>
  <select id="rooms" name="rooms" style="width:100%" multiple="multiple" data-placeholder="Select rooms..."></select>
  
  
<script>
var rooms = [{
    "id": ["Aerary", false],
    "text": "Aerary"
}]

$("#rooms").select2({
            data: rooms,
            placeholder: " Click here to select",
        });


function send()
{
        var v = $('#rooms').select2().val();
        if (!v.length) {
            alert("Select rooms");
            return false;
        }
        var data = {
            "rooms": v,
        }
        document.write(JSON.stringify(data) + '<br/><br/>Expected is: ' + JSON.stringify({"rooms":["Aerary", false]}) )

}

</script>

  <button onclick="send()">SEND</button>
  
</html>

【问题讨论】：

我得到 {"rooms":["Aerary,false"]} 预期是：{"rooms":["Aerary",false]}
你的问题是什么？
是的不一样，我想要预期的结果作为答案。
expected 和 wrong 之间没有区别，或者我错过了什么
请您现在再检查一下吗？

标签： javascript jquery-select2

【解决方案1】：

问题在于您如何设置选项的值。从下面的例子可以看出，created option（登录到控制台）的值为"Aerary,false"。

var rooms = [{
  "id": ["Aerary", false],
  "text": "Aerary"
}]

$("#rooms").select2({
  data: rooms,
  placeholder: " Click here to select",
});

console.log(document.querySelector("#rooms").firstChild)

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<label for="rooms"><b>Choose rooms</b></label>
<select id="rooms" name="rooms" style="width:100%" multiple="multiple" data-placeholder="Select rooms..."></select>

这是因为您不能为 value 字段设置多个值。库的作用是调用对象上的 .toString() 函数（如果它还不是字符串）。

由于在数组上调用 .toString() 函数的结果是逗号分隔的元素列表，这正是您得到的结果。

console.log(JSON.stringify({rooms: [["Aerary",false].toString()]}))

为了处理它，您必须手动解析它，如下所示：

const checkBoolean = (val) => val === "false" ? false : val === "true" ? true: val;
var v = $('#rooms').select2().val().map(el => el.split(",").map(checkBoolean));

请注意字符串中没有额外的逗号。

【讨论】：