As this contains textbox, dropdown field and on selecting item from dropdown dynamic label and input field.
When I select multiple options from this dropdown that values are shown inside this textbox and when I deselect options from dropdown they are removed from textbox.
Now how can I make a selected value label and input field to be created with unique id's and unique name, below the textbox with remove button?
When I deselect from dropdown or click on remove button (i.e. was dynamically created by selection), it should be deleted from the text box also get unchecked from dropdown.
I am facing a problem for creating a dynamic label and input field with unique id and uniques name for each input when clicked from dropdown
var options =
[
{"text" : "Option 1","value" : "Value 1"
},
{"text" : "Option 2","value" : "Value 2"
},
{"text" : "Option 3","value" : "Value 3"
},
{"text" : "Option 4","value" : "Value 4"
},
{"text" : "Option 5","value" : "Value 5"
},
{"text" : "Option 6","value" : "Value 6","selected" : true
},
{"text" : "rrrr","value" : "Value 7"
}
];
var selectBox = document.getElementById('multichecks');
for(var i = 0, l = options.length; i < l; i++){
var option = options[i];
selectBox.options.add( new Option(option.text, option.value, option.selected) );
}
$(document).ready(function() {
$('#multichecks').multiselect({
nonSelectedText: 'Check an option!',
maxHeight: 200,
numberDisplayed: 2,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
selectAllText: 'Check all!',
onChange: function test(o,c){
if($('#multichecks').val()){
document.getElementById('test').value = $('#multichecks').val().join(',');
}else {
document.getElementById('test').value = '';
}
if (c) addlabelinput()
}
});
});
var counter = 0;
function addlabelinput(){
for (var i = 0; i < option.length; i++){
var input = document.createElement("INPUT");
var label = document.createElement("LABEL");
input.setAttribute('type', 'text' + counter++);
input.setAttribute("id", 'textB' + counter++);
input.setAttribute("name", 'textBa' + counter++);
}
var dvContainer = document.getElementById("dvContainer")
var div = document.createElement("DIV");
div.appendChild(input);
//Create a Remove Button.
var btnRemove = document.createElement("INPUT");
btnRemove.value = "Remove";
btnRemove.type = "button";
btnRemove.onclick = function () {
dvContainer.removeChild(this.parentNode);
};
//Add the Remove Buttton to DIV.
div.appendChild(btnRemove);
//Add the DIV to the container DIV.
dvContainer.appendChild(div);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"></head><body><!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> --><hr /><div class="" id = ""><strong>Where Condition :</strong><div class = "newa" id = "newq"><select id = "multichecks" name = "UHG ID" multiple = "multiple" onclick = "test();" filterPlaceholder = "Select"></select></div><hr /><strong>Selected Columns :</strong><div class = "news" id = "newd"><textarea id="test"></textarea></div><hr /><div id = "dvContainer"></div></div>