6 Replies - 469 Views - Last Post: 03 October 2019 - 01:56 AM

#1 Tintin81   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-October 19

How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 08:58 AM

I have a projectBox that filters an infinite number of taskBoxes. More tasks can be added to the page dynamically through Javascript. I am using
document.getElementsByClassName("tasks")
to keep track of the live taskBoxes at all times (please correct me if this is the wrong approach):

    "use strict";

    document.addEventListener("DOMContentLoaded", function() {

      var projectBox = document.getElementById("project_id");    
      var taskBoxes = document.getElementsByClassName("tasks");
	  var taskOptions = taskBoxes[0].querySelectorAll("option"); // store initial select options (= ALL options)

      filterTasks();

      projectBox.addEventListener("change", function() {
        filterTasks();
      })

      function filterTasks() {
        var project = projectBox.options[projectBox.selectedIndex];
	    var options	= taskOptions;
	    var results = Array.from(options);
	    if (project.value != "") {
	      var ids = JSON.parse(project.getAttribute("data-task_ids"));
		  results = Array.from(options).filter(option => {
		    return ((ids.indexOf(parseInt(option.value, 10)) != -1) || (option.value == ""));
		  })
	    }
	    Array.from(taskBoxes).forEach(taskBox => {
		  taskBox.innerHTML = "";
		  results.forEach(result => {
			taskBox.add(result);
		  })
	    })
	  }

    })


The problem is that the taskBoxes don't get updated in the way I want them to. For some reason, when
filterTasks()
gets hit, only the last taskBox gets updated. All the other taskBoxes get reset to nil, i.e. all their options are removed. (This is probably caused by
taskBox.innerHTML = "";
)

How can I update all taskBoxes when the projectBox changes?

Thanks for any help.

Is This A Good Question/Topic? 0
  • +

Replies To: How to filter multiple dynamically added select boxes?

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2458
  • View blog
  • Posts: 7,488
  • Joined: 15-January 14

Re: How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 10:08 AM

What does the HTML structure look like? Are the taskboxes just select elements?
Was This Post Helpful? 0
  • +
  • -

#3 Tintin81   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-October 19

Re: How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 11:25 AM

Yes, they are just select boxes, each with unique individual id and name attributes, and with options:

<select class="tasks" id="tasks_232323" name="tasks_232323">
   <option value>Please select a task...</option>
   <option value="1">Clean the kitchen</option>
   <option value="2">Feed the cat</option>
</select>



When the page gets loaded, there's always one *taskBox* for an initial task. The filtering works perfect at that stage.

The user can then add an unlimited number of additional tasks through Javascript (see code in my initial post).

That's where the problems start. For some reason, only the last select box on the page gets filtered properly. All the others keep losing all their options. So they appear empty.

Why?
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2458
  • View blog
  • Posts: 7,488
  • Joined: 15-January 14

Re: How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 01:04 PM

My working theory is that the results array of objects is a reference to individual objects, so adding them to the second list removes them from the first. When you're looping through them to add them, clone each one and add the clone to each select list.
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 3038
  • View blog
  • Posts: 11,669
  • Joined: 03-December 12

Re: How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 01:04 PM

By Live, you mean not yet completed?
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2458
  • View blog
  • Posts: 7,488
  • Joined: 15-January 14

Re: How to filter multiple dynamically added select boxes?

Posted 02 October 2019 - 01:06 PM

Also, instead of using innerHTML, you can remove each one:

while (selectEl.length > 0) {
  selectEl.remove(0);
}


https://developer.mo...tElement/remove
Was This Post Helpful? 0
  • +
  • -

#7 Tintin81   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 02-October 19

Re: How to filter multiple dynamically added select boxes?

Posted 03 October 2019 - 01:56 AM

Hey Soldier,

That's it! I changed my code as you suggested:

Array.from(taskBoxes).forEach(taskBox => {
  taskBox.innerHTML = "";
  results.forEach(result => {
    taskBox.add(result.cloneNode(true));
  })
})



And it works now. Thank you!

View PostArtificialSoldier, on 02 October 2019 - 01:04 PM, said:

My working theory is that the results array of objects is a reference to individual objects, so adding them to the second list removes them from the first. When you're looping through them to add them, clone each one and add the clone to each select list.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1