JQuery Select2 Child item not shows as selected
Question
I have a select2 box with "children" attribute in the data and it render as expected. But in the edit screen when we select a child element its parent element persisted in the dropdown. For example, when we select "Live Band" while in the add form but the edit form shows "Entertainment" as selected. Please find the data format and source code I am using. Please help me to resolve this issue.
Data
[
{
"id": "12",
"text": "Personal Chef",
"parent": "0",
"order": 0
},
{
"id": "11",
"text": "Entertainment",
"parent": "0",
"order": 1,
"children": [
{
"id": "37",
"text": "DJ’s",
"parent": "11",
"order": 0
},
{
"id": "38",
"text": "Live Band",
"parent": "11",
"order": 1
},
{
"id": "36",
"text": "Clowns - Kids parties",
"parent": "11",
"order": 2
}
]
},
{
"id": "10",
"text": "Motorcycle Repair",
"parent": "0",
"order": 2
}
]
Source Code:
$(".search-result-box").select2({
placeholder: "eg: 1967 Stingray Mechanic",
multiple: false,
width: 225,
selectOnBlur: true,
data: data
});
$(".search-result-box").select2('val', 38); // Tried select2('val', "38") also.
1 answers
solution1
2 ACCPTED 2014-11-24 06:12:51
I just tried your select2 example in the plunker and it's working as per your expectation.
Please have a look and let me know if you are looking for anything else. Please also mention your jquery,select2 versions as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@1.7.1" data-semver="1.7.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link data-require="select2@*" data-semver="3.5.1" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" />
<script data-require="select2@*" data-semver="3.5.1" src="//cdn.jsdelivr.net/select2/3.5.1/select2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input type="hidden" class="search-result-box" />
</body>
</html>
JavaScript File:
$(function() {
$(".search-result-box").select2({
placeholder: "eg: 1967 Stingray Mechanic",
multiple: false,
width: 225,
selectOnBlur: true,
data: data
});
$(".search-result-box").select2('val', 38); // Tried select2('val', "38") also.
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.