<-- KIRTISHIL PATIL-->
<div class="selection py-2">
<small class="small">Select Color</small>
</div>
<!-- checkbox with color options -->
<div id="props">
<ul class="list-group " id="proplist" style="list-style: none;"></ul>
</div>
<script>
var select_color_arr = ['red', 'green', 'blue', 'yellow', 'black'];
var selected_color_arr = {}; //to check push
var selected_color_cmp_array = [];
var properties_arr = ["drop 1", "drop 2", "drop 3"];
function propAppend()
{
for (let i = 0; i < properties_arr.length; i++)
{
var li = document.createElement('li');
$(li).addClass("list-group-item d-flex align-items-center justify-content-between text-capitalize");
li.textContent = properties_arr[i];
document.getElementById('proplist').appendChild(li);
$(li).append('<span class="d-flex align-items-center">\
<span class="colorMsg" id="color_' + properties_arr[i].replace(' ', '_') + '" class="text-capitalize"></span>\
<div class="dropdown ml-2">\
<button onclick="dropdown1(\'' + properties_arr[i].replace(' ', '_') + '\',\'' + properties_arr[i] + '\')" class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
Select Color\
</button>\
<div id="drp_dwn_list_' + properties_arr[i].replace(' ', '_') + '" class="dropdown-menu" aria-labelledby="dropdownMenuButton">\
</div>\
</div>\
</span>');
}
}
propAppend();
function dropdown1(elem_id, key)
{
$('#drp_dwn_list_' + elem_id).empty();
var cmparr = Object.values(selected_color_arr);
for (var i in select_color_arr)
{
if(!cmparr.includes(select_color_arr[i]))
{
$('#drp_dwn_list_' + elem_id).append('<a onclick="selectedColor(\''+key+'\',\''+select_color_arr[i]+'\')" class="text-capitalize dropdown-item" href="#">' + select_color_arr[i] + '</a>');
}
}
}
function selectedColor(prop, values)
{
selected_color_arr[prop] = values;
$('#color_'+prop.replace(' ', '_')).css({"color":values});
$('#color_'+prop.replace(' ', '_')).text(values);
}
No comments:
Post a Comment