当第一个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/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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/
在文档中，标题为清除选择:
您可以通过将控件的值设置为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 ...
});
为了清除选中的值，尝试使用以下代码:
$('#idOfSelectElement').prop('selectedIndex',-1);
其中#idOfSelectElement-顾名思义是select id的名称。
这段代码覆盖了<select multiple>和，但没有触发更改事件
为了触发更改事件，您必须在后面添加.trigger( "change" );:
$('#idOfSelectElement').prop('selectedIndex',-1).trigger( "change" );