JSFiddle - React, Tailwind, and code Playground
HTML
<div id="selectContainer">
<p><select class="my-select"></select></p>
</div>
<p><button id="addOneMore">+ Ekle</button></p>
JavaScript
var elements = ["Asuman", "Ahmet", "Ali", "Ayşe", "Mehmet"];
var selectedElements = [];
/**
* Adds an option to a select object
*/
function addOption(select, optVal, opt) {
var opt = $("<option />").attr('value', optVal).text(opt);
select.append(opt);
}
/**
* Adds all available options to a select object
*/
function addOptions(select) {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
addOption(select, element, element);
}
// remove new selected element from available elements
var e = elements.splice(0, 1)[0];
// add it to selectedElements array
selectedElements.push(e);
removeOptions(e, select);
}
/**
* Removes an option from a given select object
*/
function removeOption(select, optionValue) {
var option = select.find('option[value="' + optionValue + '"]');
option.remove();
}
/**
* Removes an option from all select objects except the given
*/
function removeOptions(optionValue, excludeSelect) {
var selects = $(".my-select").not(excludeSelect);
for (var i = 0; i < selects.length; i++) {
var select = $(selects[i]);
removeOption(select, optionValue);
}
}
/**
* Adds a new select element when the add button is pressed.
*/
function addSelect() {
if (elements.length == 0) {
return;
}
var select = $("<select />").addClass("my-select");
var p = $("<p />").append(select);
addOptions(select);
$("#selectContainer").append(p);
}
/**
* Adds a value to and remove a value from all selects except the given select
*/
function replaceOptions(addValue, removeValue, excludeSelect) {
var selects = $(".my-select").not(excludeSelect);
for (var i = 0; i < selects.length; i++) {
var select = $(selects[i]);
removeOption(select, removeValue);
addOption(select, addValue, addValue);
}
}
/**
* Called when a selection changes
*/
function selectionChange() {
var select = $(this);
...