JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h2>
l table
</h2>
<table>
<tr>
<td class="h-sample">
<div class="flex-nowrap input-group">
<lable> bulk</lable>
<select class="selectize-project" onchange="async_bulk_edit_dropdown_multi('project-dropdown', this)">
<!-- some example options -->
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="align-middle">
<select class="selectize-project project-dropdown">
<!-- some example options -->
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
</td>
</tr>
<tr>
<td class="align-middle">
<select class="selectize-project project-dropdown">
<!-- some example options -->
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
</td>
</tr>
<tr>
<td class="align-middle">
<select class="selectize-project project-dropdown">
<!-- some example options -->
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
</td>
</tr>
<tr>
<td class="align-middle">
<select class="selectize-project project-dropdown">
<!-- some example options -->
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
</td>
</tr>
<tr>
<td class="align-middle">
<select...
JavaScript
function initSelectizeProject() {
let dropdowns = document.querySelectorAll('select.selectize-project');
for (let dropdown of dropdowns) {
$(dropdown).selectize({
create: false,
persist: false,
closeAfterSelect: true,
});
}
}
async function async_bulk_edit_dropdown_multi(selector, origin) {
let dropdowns = origin.closest('table').querySelectorAll(`select.${selector}`);
for (let dropdown of dropdowns) {
let dropdownSelectize = dropdown.selectize;
dropdownSelectize.clear(origin.options.length > 0);
for (let i = 0; i < origin.options.length; i++) {
console.time();
dropdownSelectize.addItem(origin.options[i].value, i < origin.options.length - 1);
console.timeEnd();
}
}
}
initSelectizeProject();