I want to prevent multiple selections of same value in my project.
My form
<div class="form-row">
<div class="form-group col-md-6">
<select name="number" class="form-control" id="index0">
<option value="">Select Number</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" id="addNumber" onclick="addNumber();">Add Number</button>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<select name="letter" class="form-control" id="index00">
<option value="">Select Letter</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" onclick="addLetter();">Add Letter</button>
</div>
</div>
<div class="newHtml">
<div class="newLetter">
</div>
</div>
I have two select box one for number and one for letter.
A number can have many letters eg, number 1 can have letters A,B,C,D,E, etc and same goes for other numbers.
When I append new form clicking add number button the selected number should not display there. And if for number 1 letter A is already selected then A should not appear for that number 1 if I click add letter button.
How to achieve that?
Actually it's not so much hard with jQuery/CSS selectors. Try that one:
let letters = ["A", "B", "C", "D", "E"];
function addNumber() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .number[data-value=" + val1 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val1 + '" class="number">' + val1 + "</div>"
);
$('#index0 > option[value="' + val1 + '"]').remove();
$('#index00 > option[value="' + letters[parseInt(val1) - 1] + '"]').remove();
}
}
function addLetter() {
let val1 = $("#index0").val();
let val2 = $("#index00").val();
if ($(".newLetter > .letter[data-value=" + val2 + "]").length == 0) {
$(".newLetter").append(
'<div data-value="' + val2 + '" class="letter">' + val2 + "</div>"
);
$('#index1 > option[value="' + val2 + '"]').remove();
}
}
Look at it on codepen
You should create an array, so can integrate the values. I may not understand correctly.
Is this something like you want to achieve?
let records = [];
const numberDropdown = document.querySelector("#dropdown-number"),
letterDropdown = document.querySelector("#dropdown-letter"),
submitButton = document.querySelector("#submit-btn");
submitButton.addEventListener("click", handleEntry);
numberDropdown.addEventListener("change", updateDropdowns);
letterDropdown.addEventListener("change", updateDropdowns);
function handleEntry() {
let selectedNumber = numberDropdown.value,
selectedLetter = letterDropdown.value;
records.push({
number: selectedNumber,
letter: selectedLetter
});
updateList();
updateDropdowns();
let i = 0;
while (letterDropdown.options[i].disabled) {
i++
};
letterDropdown.selectedIndex = i;
}
function updateDropdowns() {
if (records.length) {
let noLeft = true;
document.querySelectorAll("#dropdown-letter option").forEach((option) => {
let taken = false;
records.forEach((record) => {
if (
option.value == record.letter &&
numberDropdown.value == record.number
) {
taken = true;
}
});
if (taken) {
option.disabled = true;
} else {
option.disabled = false;
noLeft = false;
}
});
if (noLeft) {
submitButton.disabled = true;
alert('select another number');
} else {
submitButton.disabled = false;
}
} else {
document.querySelectorAll("#number-dropdown option").forEach((option) => {
option.disabled = false;
});
}
}
updateDropdowns();
updateList();
function updateList() {
document.querySelector('#list').innerHTML = '';
records.forEach((record) => {
document.querySelector('#list').innerHTML += `<li>${record.letter} | ${record.number}</li>`
});
}
<select id="dropdown-number">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="dropdown-letter">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<button id="submit-btn">Add</button>
<p>Entries:</p>
<ul id="list"></ul>
Related
Cancellation of confirm() doesn't prevent submission. Even if I click cancel, it still submits.
How can I cancel the submission?
<form>
<div class="actions d-flex justify-content-center">
<button class="btn btn-success" onclick="return warning(this.form)">Submit</button>
</div>
</form>
<script type="text/javascript">
function warning(form) {
if (window.focus) self.focus();
var tmp = 100;
for (i = 0; i < tmp; i++) {
var sel = document.getElementById("student_answer_role" + (i + 1));
var val = sel.options[sel.selectedIndex].value;
if (val == "") {
return confirm("You didn't answer all questions.");
}
}
}
</script>
Your code will fail if there are less questions than 100 and all questions are answered. If you only have until student_answer_role10 then testing student_answer_role11 will cause an error which will exit the validation code and cause the submission of the form
Here is a better way
window.addEventListener("load", function() {
document.getElementById("studentForm").addEventListener("submit", function(e) {
let text = [];
[...document.querySelectorAll("select[id^=student_answer_role]")].forEach((sel, i) => {
const val = sel.options[sel.selectedIndex].value;
if (val == "") {
text.push("You didn't answer question #" + (i + 1)); // can be used for ANY error
}
})
if (text.length > 0) {
if (!confirm(text.join("\n") + "\nContinue?")) {
e.preventDefault(); // stop submission
}
}
})
})
<form id="studentForm">
<select id="student_answer_role1">
<option value="">Please select</option>
<option value="1">One</option>
</select>
<select id="student_answer_role2">
<option value="">Please select</option>
<option value="2">Two</option>
</select>
<div class="actions d-flex justify-content-center">
<button class="btn btn-success">Submit</button>
</div>
</form>
I am having div with input elements with Add and Cancel buttons.
When user clicked on add Button,I need to generate div with the same input elements and capture the value to JSon object.
Here is my code snippet
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
I tried with clone and trying to retrieve values from the input elements inside div,but I am facing issue with getting values and generating ids.
$('#addBtn_' + count).click(function () {
var newel = $("#filterfields").clone(true);
var jsonData = [];
$(newel).insertAfter("#filterfields");
var index;
$("#filterfields").find('input:text,select').each(function () {
let str = '{"' + this.id + '":' + (this.value + '}';
jsonData.push(str);
}).end()
newel.find(':input').each(function () {
var oldId = $(this).attr("id");
var split = oldId.toString().split('_');
index = parseInt(split[1]);
var curId = split[0];
var newId = curId + "_" + index + 1;
this.id = newId;
}).end()
jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');
});
Please suggest me if there is better way to achieve the similar function as I am not able to get values of input elements of current row.
Consider the following code.
$(function() {
function formToJson(fObj) {
var j = [];
fObj.children().not("button, label").each(function(i, el) {
// Will avoid buttons and labels
if (!($(el).is(":radio") && !$(el).is(":checked"))) {
// Will avoid unselected Radio Buttons
var d = {
nodeName: $(el).prop("nodeName"),
props: {
class: $(el).attr("class"),
id: $(el).attr("id")
},
value: $(el).val(),
name: $(el).attr("name")
};
if (d.nodeName != "SELECT") {
d.props.type = $(el).attr("type");
}
j.push(d);
}
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
As you are iterating over elements, it is best to use .each(). Using the proper selector, we can target just the form elements you want. You then want a condition to ensure that if a Radio Button is selected (or checked) that it is included and others are excluded.
The result is an Array of Objects that can be used to rebuild the HTML Structure or just build new copies.
Update
$(function() {
function formToJson(fObj) {
var j = [];
fObj.each(function(i, el) {
var d = {};
$("select, input", el).each(function(k, v) {
if (!($(v).is(":radio") && !$(v).is(":checked"))) {
d[$(v).attr("id")] = $(v).val();
}
});
j.push(d);
});
return j;
}
$("[id^='addBtn']").click(function() {
var jsonData = formToJson($("#filterFieldsForm"));
console.log(jsonData);
var filter = "Filter: ";
$.each(jsonData, function(key, item) {
if (key != 2) {
filter += item.value + " ";
} else {
filter += "'" + item.value + "' ";
}
});
$("<div>", {
class: "filter-results"
}).html(filter).appendTo("body");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
<form class="form-inline" id="filterFieldsForm">
<select class="form-control" name="TypeCode" id="filterType_0">
<option value="Type">Type</option>
<option value="SubmittedBy">SubmittedBy</option>
<option value="Date">Date</option>
<option value="Description">Description</option>
</select>
<select class="form-control" name="Filter" id="filterCondition_0">
<option value="Equal">Equal</option>
<option value="StartsWith">Starts With</option>
<option value="EndsWith">Ends With</option>
<option value="Greaterthan">Greater Than</option>
<option value="Lessthan">Less Than</option>
</select>
<input type="text" name="caseFilterText" class="form-control" id="filterText_0">
<input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
<label for="andRadio">AND</label>
<input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
<label for="orRadio">OR</label>
<button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
<button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
</form>
</div>
This will target the various rows and for each row, it will gather all the Select and Inputs.
When we select Anesthesiology in first input, the second input should only show Anesthesiology doctors, when we select Cardiology it should only show Cardiology doctors and so on. Should I use Javascript or jQuery for this? Please help me to find out solution for this. Thank you.
HTML
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
Try use the following example,
This will hide all options and only show those that contains the value from dept dropdown
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
This will then automatic set the first visible element to be selected, so it updates the dropdown of doctors
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
$('#dept').change(function() {
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
This will update second dropdown when first will change.
(function () {
var $dept = $('#dept');
var $doctors = $('#doctors');
$dept.on('change', onDocSelected)
function onDocSelected() {
var selected = $dept.val();
$doctors.find('option').each(function (i, opt) {
toggle(selected, opt)
});
}
function toggle(selected, opt) {
var isApplicable = opt.text.indexOf(selected) !== -1;
return isApplicable ? $(opt).show() : $(opt).hide();
}
}($))
Apply a class to the options of the second select list - and on change of the first select - hide all optionsand then show only those with the corresponding class.
$(document).ready(function(){
$('#dept').change(function(){
var specialty = $(this).val();
$('#doctors').val(0);
$('#doctors option').hide();
$('.'+ specialty).show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<label> Select a specialty</label>
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<label> Select a Doctor</label>
<select id="doctors" class="form-control">
<option></option>
<option class="Anesthesiology">Anesthesiology doctor 1</option>
<option class="Anesthesiology">Anesthesiology doctor 2</option>
<option class="Cardiology">Cardiology doctor 1</option>
<option class="Cardiology">Cardiology doctor 2</option>
<option class="Dermatology">Dermatology doctor 1</option>
<option class="Dermatology">Dermatology doctor 2</option>
</select>
</div>
check this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
script for above selection
$(document).ready(function(){
var docotors = ['Anesthesiology doctor 1','Anesthesiology doctor 2','Cardiology doctor 1','Cardiology doctor 2','Dermatology doctor 1'];
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#docotrs").empty();
docotors.forEach(function (i) {
if(i.indexOf(selectdDept) >= 0){
$("#doctors").append('<option>'+i+'</option>');
}
});
});
});
If you have doctors name list than create an JSON object by the below method and access it by the selected department value
$(document).ready(function(){
var docotors = {'Anesthesiology':['Anesthesiology doctor 1','Anesthesiology doctor 2'],'Cardiology':['Cardiology doctor 1','Cardiology doctor 2'],'Dermatology':['Dermatology doctor 1']};
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#doctors").empty();
if(selectdDept){
var selectedDeptDocotors = docotors[""+selectdDept+""];
selectedDeptDocotors.forEach(function(i){
$("#doctors").append('<option>'+i+'</option>');
});
}
});
});
If you want to do with pure javascript, you may try this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments" onchange="showOptions(this)">
<option>Select option</option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
SCRIPTS:
var Anesthesiology = [
{ text: "Anesthesiology doctor 1" },
{ text: "Anesthesiology doctor 2" }];
var Cardiology = [
{ text: "Cardiology doctor 1" },
{ text: "Cardiology doctor 2" }];
var Dermatology = [
{ text: "Dermatology doctor 1" },
{ text: "Dermatology doctor 2" }];
function showOptions(e) {
var userSelection = e.options[e.selectedIndex].text;
switch (userSelection) {
case 'Anesthesiology':
options(Anesthesiology);
break;
case 'Cardiology':
options(Cardiology);
break;
case 'Dermatology':
options(Dermatology);
break;
default:
document.getElementById('doctors').innerHTML = "";
break;
}
}
function options(arr) {
var selectList = document.getElementById('doctors');
var len = selectList.options.length;
for (var i = 0; i < arr.length; i++) {
for (j = 0; j < len; j++) {
selectList.options[j] = null;
}
var option = document.createElement("option");
option.text = arr[i].text;
selectList.appendChild(option);
}
}
Initially i have one textbox/selectbox when user enters something or selects something generate another textbox/selectbox and also i can set limit how many textbox/selectbox can be generated.
please advice me how can i achieve this
You can use jQuery append() method to create html dynamically.
$("#ddlOptions").on("change", function(e) {
var len = $('.txtInput').length;
if (len == 0) {
$('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
}
});
$(document).on("change", '.txtInput', function() {
var len = $('.txtInput').length;
if ($(this).val() != "") {
$('.container').append('<br> <input type="text" id=txtTextBox_' + len + ' class="txtInput" /> <br>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select id="ddlOptions">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
var counter=0;
function generate(){
var newTxt='<input type="text">';
var newSel='<select><option value="">--select--</option></select>';
var txtlimit=document.getElementById('txtlimit');
var div=document.getElementById('newCtrls');
var totalElem=div.getElementsByTagName('input').length;
if(!isNaN(txtlimit.value) && txtlimit.value!=''){
if(parseInt(txtlimit.value)>counter &&
parseInt(txtlimit.value)>totalElem){
div.innerHTML += newTxt + newSel+'<br>';
counter++;
}
}else{
div.innerHTML +=newTxt + newSel+'<br>';
}
}
<input type="text" id="txtlimit" placeholder="Enter Limit"><br>
<input type="text" onkeyup="generate();">
<select onchange="generate();">
<option value="Item1">--select--</option>
<option value="Item1">Item1</option>
<option value="Item2">Item2</option>
<option value="Item3">Item3</option>
</select><br>
<div id="newCtrls">
<h3>Dynamic Controls Here</h3>
</div>
Below is what I have...
<html>
<body>
<form name="myForm">
<select name="myOption" multiple>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<BR><BR>
<input type=submit value="Print First" onClick="printMe()">
<input type=submit value="Print All" onClick="printAll()">
</body>
<script>
function printMe() {
alert ("Selected option is " + myForm.myOption.value);
}
function printAll() {
var str = "";
// what should I write here??
alert("Options selected are " + str);
}
</script>
</html>
Please let me know what should I write in printAll() so that I can print all the values that I selected... I know how can I print the first selected value...
how about this??
function printAll() {
var str="",i;
for (i=0;i<myForm.myOption.options.length;i++) {
if (myForm.myOption.options[i].selected) {
str = str + i + " ";
}
}
alert("Options selected are " + str);
}
Good Luck!!!
You can do something like this:
function printAll() {
var obj = myForm.myOption,
options = obj.options,
selected = [], i, str;
for (i = 0; i < options.length; i++) {
options[i].selected && selected.push(obj[i].value);
}
str = selected.join();
// what should I write here??
alert("Options selected are " + str);
}
Demo: http://jsfiddle.net/n3cXj/1/
I would use jquery as it's easier
JQuery:
$("myOption:selected").each(function () {
alert($(this).text());
});
http://jsfiddle.net/XBDmU/2/
var selected = [];
$("#Mymutiple option").each(function(){
$(this).click(function(evt){
myvar = $(this).val();
if (evt.ctrlKey){
if(jQuery.inArray(myvar, selected) >-1){
selected = jQuery.grep(selected , function(value) {
return value != myvar;
});
}
else{
selected.push(myvar);
}
}
else{
selected = [];
selected.push(myvar);
}
});
})
$("#printMe").click(function(){
alert("First selected is:" + selected[0]);
return false;
});
$("#printAll").click(function(){
alert("Options selected are :" + selected);
return false;
});
html:
<form name="myForm">
<select name="myOption" id="Mymutiple" multiple>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<BR><BR>
<input type="submit" value="Print First" id="printMe">
<input type="submit" value="Print All" id="printAll">
This will help you. It's in pure js. no jquery, mootools...
<!DOCTYPE html>
<html>
<body>
<script>
function get(){
var str="",i;
for (i=0;i<asa.cars.options.length;i++) {
if (asa.cars.options[i].selected) {
str += asa.cars.options[i].value + ",";
}
}
if (str.charAt(str.length - 1) == ',') {
str = str.substr(0, str.length - 1);
}
alert("Options selected are " + str);
}
</script>
<form name="asa">
<select name="cars" id="combo" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" onclick="get()">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
In angular 4, instead of using angular multi-select dropdown I used the normal one.
Following is the code.
HTML file:
<select [ngModel]="DataValue" (change)="selectChangeHandler($event)"
id="multiple-select" name="multiple-select" class ="form-control" multiple>
<option *ngFor="let ref of Data" [value]="ref['title']">
{{ref['title']}}
</option>
</select>
Ts file:
selectChangeHandler (event: any) {
let oldvalue;
let mergedValue = "";
for ( let index = 0 ; index < event.currentTarget.selectedOptions.length; index++)
{
oldvalue = event.currentTarget.selectedOptions[index].value.replace(/["']/g, "");
oldvalue = oldvalue.split(': ')[1];
if (index ==`enter code here`= 0)
{ mergedValue += oldvalue; }
else
{ mergedValue += ", " + oldvalue; }
}
console.log(mergedValue);
}
Comments:
Using event.currentTarget.selectedOptions[index].value you can get multiple selected values of multi-select dropdown. In my case, mergedValue gives me proper multiple selected values.
I have used split and replace to format the string obtained as I wanted it common separated.
I hope this can help someone.