时间戳

首页 > 解决方案 > 无法从 select2 获取 JSON 值

javascript - 无法从 select2 获取 JSON 值

问题描述

我正在使用 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>

标签： javascriptjquery-select2

解决方案

问题在于您如何设置选项的值。从下面的例子可以看出，created 选项的值（登录到控制台）是"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));

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

推荐阅读