0

I would like to make a select option list that dynamically removes options as they are chosen. After the first selection the list becomes no longer responsive. Any help is much appreciated!

(UPDATE working):
Replaced: $(".select_list").change(function() {
With: $('#menu').on("click", '.select_list', function() {

HTML:

var misc_array = ["A", "B", "C"];

function buildList() {
  var select_list = "<select class='select_list'>";
  select_list += "<option>Select</option>";

  for (i = 0; i < misc_array.length; i++) {
    select_list += "<option>" + misc_array[i] + "</option>";
  }

  select_list += "</select>";
  return select_list;
}

$("#menu").html(buildList());

$(".select_list").change(function() {
  console.log(this.value);
  for (i = 0; i < misc_array.length; i++) {
    if (misc_array[i] == this.value) {
      misc_array.splice(i, 1);
    }
  }
  // $("#menu").empty();
  $("#menu").html(buildList());
  console.log(misc_array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div id="menu"></div>

</body>
HYUTS
  • 97
  • 2
  • 12
  • 1
    It would be better if you left the ` – Barmar Jul 03 '18 at 20:12
  • 1
    BTW, you should break out of the loop when you find the matching value. There's no need to keep searching. – Barmar Jul 03 '18 at 20:13

0 Answers0