[英]How can I select children options from optgroup in Select2?
Question: I have successfully created a select2 template with a group but I can't select the items in it, is there anything missing from the code I made below?问题:我已经成功创建了一个带有组的 select2 模板,但我无法选择其中的项目,我在下面制作的代码中是否缺少任何内容? Any help from you means a lot to me, thank you
你的任何帮助对我来说意义重大,谢谢
See this first, Preview Image先看这个,预览图
For the data below, i folow https://select2.org/data-sources/formats对于以下数据,我遵循https://select2.org/data-sources/formats
Result from AJAX :来自 AJAX 的结果:
{
"status": true,
"message": null,
"data": [
{
"text": "Bank",
"children": [
{
"id": "002",
"icon": ".../payment/bri_1.png",
"text": "BANK BRI"
},
{
"id": "008",
"icon": ".../payment/mandiri_1.png",
"text": "BANK MANDIRI"
},
{
"id": "009",
"icon": ".../payment/bni_1.png",
"text": "BANK BNI / SYARIAH"
},
{
"id": "014",
"icon": ".../payment/bca_1.png",
"text": "BANK BCA"
},
{
"id": "022",
"icon": ".../payment/1280px-CIMB_Niaga_logo.svg.png",
"text": "CIMB NIAGA / SYARIAH"
},
{
"id": "016",
"icon": ".../payment/Maybank-Logo.png",
"text": "Maybank"
},
{
"id": "013",
"icon": ".../payment/images.png",
"text": "PERMATA BANK"
},
{
"id": "213",
"icon": ".../payment/Jenius-logo.png",
"text": "Jenius/BTPN"
},
{
"id": "011",
"icon": ".../payment/kissclipart-danamon-logo-png-clipart-bank-danamon-logo-a9b2b21755c37a3a.png",
"text": "Danamon"
},
{
"id": "012",
"icon": ".../payment/images_1.png",
"text": "Bank Neo Commerce/Bank Yudha Bakti"
},
{
"id": "017",
"icon": ".../payment/images-removebg-preview.png",
"text": "Bank Syariah Indonesia"
}
]
},
{
"text": "eMoney",
"children": [
{
"id": "900",
"icon": ".../payment/ovo.png",
"text": "OVO"
},
{
"id": "901",
"icon": ".../payment/gopay.png",
"text": "GOPAY"
},
{
"id": "903",
"icon": ".../payment/dana_1.png",
"text": "DANA"
},
{
"id": "904",
"icon": ".../payment/linkaja.png",
"text": "LINK AJA"
},
{
"id": "906",
"icon": ".../payment/shopeepay-shopee.co.id_ratio-16x9.jpg",
"text": "SHOPEE PAY"
}
]
}
]
}
Code :代码 :
$("#payment").select2({ placeholder: 'Payment', width: 'resolve', minimumResultsForSearch: Infinity, templateResult: function formatState(state) { if (!state.id) return state.text; var $state = $( '<span><img src="' + state.icon + '" style="width:30px;"/> ' + state.text + '</span>' ); return $state; }, ajax: { url: base_url + 'user/api/payment', dataType: 'json', processResults: function(data) { return { results: $.map(data.data, function(item, key) { var children = []; for (var k in item.children) { var childItem = []; childItem.id = item.children[k].id; childItem.icon = item.children[k].icon; childItem.text = item.children[k].text; children.push(childItem); } return { text: item.text, children: children, } }) }; }, } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> <div class="form-group"> <label for="" class="col-sm-2 control-label">Payment</label> <div class="col-sm-10"> <select name="payment" id="payment" class="form-control"> </select> </div> </div>
As far as I can see in your code, your API is returning results already formatted, so keep it simple .据我在您的代码中所见,您的 API 正在返回已格式化的结果,因此请保持简单。 Please check this fiddle with a fully working example based on your code.
请使用基于您的代码的完整工作示例检查此小提琴。
$("#payment").select2({
placeholder: 'Payment',
width: 'resolve',
ajax: {
url: 'https://randomuser.me/api/', //a random URL to simulate a request response in jsfiddle
dataType: 'json',
processResults: (data) => ({ results: response.data })
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.