This implementation uses bootstrap-multiselect to enable dynamic interaction between multi-select dropdowns and an HTML table. The core functionality includes:
- Selecting multiple options from a dropdown and adding them as rows in a table.
- Removing the selected opsions from the dropdown after they are added.
- Restoring removed options back to the dropdown when their corresponding table row is deleted.
HTML Structure
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/thirdpart/zui/css/zui.min.css">
<link rel="stylesheet" href="/static/thirdpart/zui/css/zui-theme.css">
<link rel="stylesheet" href="/static/thirdpart/zui/lib/datatable/zui.datatable.min.css">
<script src="/static/thirdpart/zui/lib/jquery/jquery.js"></script>
<script src="/static/thirdpart/zui/js/zui.js"></script>
<script src="/static/thirdpart/zui/lib/datatable/zui.datatable.min.js"></script>
<script src="/static/thirdpart/bootstrap/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="/static/thirdpart/bootstrap/css/bootstrap-multiselect.css">
</head>
<body>
<div class="modal" id="assign_servers" style="display: block; position: static;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Assign Servers</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-1">Cloud</label>
<div class="col-xs-3">
<select multiple="multiple" class="form-control" id="cloud_server_ip">
<option value="0">cloud_server0</option>
<option value="1">cloud_server1</option>
<option value="2">cloud_server2</option>
<option value="3">cloud_server3</option>
<option value="4">cloud_server4</option>
<option value="5">cloud_server5</option>
</select>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-primary" id="add_cloud_data">ADD</button>
</div>
<label class="col-xs-2">Device</label>
<div class="col-xs-3">
<select multiple="multiple" class="form-control" id="device_server_ip">
<option value="0">device_server0</option>
<option value="1">device_server1</option>
<option value="2">device_server2</option>
<option value="3">device_server3</option>
<option value="4">device_server4</option>
<option value="5">device_server5</option>
</select>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-primary" id="add_device_data">ADD</button>
</div>
</div>
</form>
<form id="server_form" method="post">
<div style="overflow-y: auto; height: 300px;">
<table class="table table-hover" id="server_table" style="margin-top:10px">
<thead>
<tr>
<th>Server Type</th>
<th>Host Name</th>
<th>Operation</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#cloud_server_ip, #device_server_ip').multiselect({
includeSelectAllOption: true,
buttonWidth: '130px',
maxHeight: 150
});
});
</script>
</body>
</html>
JavaScript Logic
<script>
$(function () {
$('#add_cloud_data').on('click', function () {
const selected = $('#cloud_server_ip').val();
if (selected && selected.length) {
processSelection('Cloud', 'cloud_server_ip');
}
});
$('#add_device_data').on('click', function () {
const selected = $('#device_server_ip').val();
if (selected && selected.length) {
processSelection('Device', 'device_server_ip');
}
});
function processSelection(type, selectId) {
const $select = $('#' + selectId);
const selectedValues = $select.val();
const selectedOptions = $select.find('option:selected');
selectedOptions.each(function () {
const value = $(this).val();
const text = $(this).text();
appendTableRow(type, selectId, value, text);
$(this).remove();
});
$select.multiselect('rebuild');
}
function appendTableRow(serverType, sourceSelectId, hostValue, hostText) {
const row = document.createElement('tr');
row.className = 'table_data';
// Server Type Cell
const typeCell = document.createElement('td');
const typeInput = document.createElement('input');
typeInput.type = 'text';
typeInput.value = serverType;
typeInput.readOnly = true;
typeInput.style.width = '70px';
typeInput.name = 'table_servertype';
typeInput.className = 'table_data';
typeCell.appendChild(typeInput);
row.appendChild(typeCell);
// Host Name Cell
const hostCell = document.createElement('td');
const hostInput = document.createElement('input');
hostInput.type = 'text';
hostInput.value = hostText;
hostInput.title = hostValue;
hostInput.id = 'table_hostname';
hostInput.name = 'table_hostname';
hostInput.style.width = '300px';
hostInput.readOnly = true;
hostInput.className = 'table_data';
hostCell.appendChild(hostInput);
row.appendChild(hostCell);
// Delete Button Cell
const actionCell = document.createElement('td');
const deleteBtn = document.createElement('button');
deleteBtn.type = 'button';
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'btn btn-sm btn-danger';
deleteBtn.onclick = function () {
if (confirm('Are you sure you want to remove this entry?')) {
const option = document.createElement('option');
option.value = hostValue;
option.textContent = hostText;
document.getElementById(sourceSelectId).appendChild(option);
row.remove();
$('#' + sourceSelectId).multiselect('rebuild');
}
};
actionCell.appendChild(deleteBtn);
row.appendChild(actionCell);
document.querySelector('#server_table tbody').appendChild(row);
}
});
</script>