我正在使用 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>
问题在于您如何设置选项的值。从下面的示例中可以看出, 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));
请注意字符串中没有额外的逗号。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句