Saturday, June 26, 2021

array imp function with dropdown don't display selected elements

 <-- 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);

}

</script>

No comments:

Post a Comment

Kirtishil Patil