如何清除在主选项更改为 json 值后选择的 select2 选项？

查尔斯·莫拉莱斯

当第一个 select2 更改时，我正在尝试清理所有选项。

代码实际上工作正常，但是当第一个选择选项更改时，第三个 select2 仍然处于活动状态，显示旧值。

<html lang="en">
<head> 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>

 <select name="customerId" id="customerId">
   <option value="">Seleccione</option>
 </select>

 <select name="customerDetail" id="customerDetail"></select>

<select name="customerDetail2" id="customerDetail2"></select>

<script>
let getCustomers = async (id, path) => {
    let data = []
    await fetch(path)
        .then(response => response.json())
        .then(response => {
            data = response.map((value, index) => {
                return {
                    id: value.id,
                    text: value.name
                }
            })
            $(id).select2({
                placeholder: "Seleccione",
                width: '250px',
                data: data
            })
        });
    return data
}
let getCustomerDetails = async (id, path, $el, field) => {
    let data = []
    await fetch(path)
        .then(response => response.json())
        .then(response => {
            let filter = response.filter((value, index) => {
                return ($el.value == value[field])
            })
            data.push({
                id: 0,
                text: 'Seleccione',
            }) 
            filter.forEach((value, index) => {
                data.push({
                    id: value.id,
                    text: value.name
                })
            })
            $(id).empty()
            $(id).select2({
                placeholder: "Seleccione",
                width: '250px',
                data: data
            })
        });
    return data
}
$(window).on('load', () => {
    $('select').select2({
        placeholder: "Seleccione",
        width: '250px',
    })
    getCustomers('#customerId', 'customers.json')
    
    $('#customerId').on('change', (e) => {
        let $element = e.target
        getCustomerDetails('#customerDetail', 'customersDetails.json', $element, 'customer_id')
    })
    $('#customerDetail').on('change', (e) => {
        let $element = e.target
        getCustomerDetails('#customerDetail2', 'customersDetails.json', $element, 'customer_owner')
    })
})

</script>

</body>
</html>

这是customers.json

[
 {
   "id": 1,
   "name": "company demo"
  }
]

这是customerDetails.json

[
 {
   "id": 1,
   "customer_id": 1,
   "customer_owner": 1,
   "name": "Customer detail 1",
 }
]

我会感谢你的所有评论。

老实说，我不知道如何在 jsfiddle 上显示，但信息在这里：

https://jsfiddle.net/cmorales/cw91ts3n/2/

不要恐慌

从文档中，标题为Clearing selections的部分：

您可以通过将控件的值设置为 null 来清除 Select2 控件中的所有当前选择：
$('#mySelect2').val(null).trigger('change');

在您的情况下，您可以在更改处理程序中使用它，例如：

$('#customerId').on('change', (e) => {
    // First reset the other 2 select2s
    $('#customerDetail, #customerDetail2').val(null).trigger('change');

    // ... rest of your code ...
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。