Dropdown with multiple selections organized in a hierarchical structure

Question

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following :

Implement a drop-down menu that reflects hierarchical parent-child relationships.
Include a checkbox for each node to allow for selection.
If all child nodes are selected, their parent node should be automatically checked, or vice versa.

For example, I require a drop-down structure like this :

[Checkbox]Element 1
      [Checkbox]Element 1.1
      [Checkbox]Element 1.2
             [Checkbox]Element 1.2.1
             [Checkbox]Element 1.2.2
[Checkbox]Element 2
      [Checkbox]Element 2.1
      [Checkbox]Element 2.2
             [Checkbox]Element 2.2.1
             [Checkbox]Element 2.2.2

Please recommend any solutions or available plugins to achieve this functionality. The hierarchy may extend beyond 4-5 levels in the future.

Thank you in advance.

javascript jquery css drop-down-menu

Answer 1

Answer №1

Check out this dummy code I created, it might be helpful for you.

Here is the HTML structure -

<div class="parent">
  <input type="checkbox">1
  <div>
    <input type="checkbox">1.1
    <input type="checkbox">1.2
    <div>
      <input type="checkbox">1.2.1
      <div>
        <input type="checkbox">1.2.1.1
        <input type="checkbox">1.2.1.2
        <input type="checkbox">1.2.1.3
      </div>
      <input type="checkbox">1.2.2
    </div>
  </div>
  <input type="checkbox">2
  <div>
    <input type="checkbox">2.1
    <input type="checkbox">2.2
  </div>
</div>

Below is the JQuery script -

$('input').change(function(){
    var status = false;
  $(this).next().find('input').prop('checked', this.checked); 
    status = ($(this).parent().find('> input').not(':checked').length === 0);
  $(this).parent().prev().prop('checked', status);
  if(status){
        $(this).parent().prev().trigger("change");
  }
  else{
    $(this).parents().prev().prop('checked', false);
  }
});

For a demonstration, you can visit this link - here

Answer 2

Check out this dummy code I created, it might be helpful for you.

Here is the HTML structure -

<div class="parent">
  <input type="checkbox">1
  <div>
    <input type="checkbox">1.1
    <input type="checkbox">1.2
    <div>
      <input type="checkbox">1.2.1
      <div>
        <input type="checkbox">1.2.1.1
        <input type="checkbox">1.2.1.2
        <input type="checkbox">1.2.1.3
      </div>
      <input type="checkbox">1.2.2
    </div>
  </div>
  <input type="checkbox">2
  <div>
    <input type="checkbox">2.1
    <input type="checkbox">2.2
  </div>
</div>

Below is the JQuery script -

$('input').change(function(){
    var status = false;
  $(this).next().find('input').prop('checked', this.checked); 
    status = ($(this).parent().find('> input').not(':checked').length === 0);
  $(this).parent().prev().prop('checked', status);
  if(status){
        $(this).parent().prev().trigger("change");
  }
  else{
    $(this).parents().prev().prop('checked', false);
  }
});

For a demonstration, you can visit this link - here

Answer 3

Answer №2

Check out this helpful plugin called Bootstrap Treeview

I've found it to be really useful for situations similar to yours.

Answer 4

Check out this helpful plugin called Bootstrap Treeview

I've found it to be really useful for situations similar to yours.

Dropdown with multiple selections organized in a hierarchical structure

Answer №1

Answer №2

Similar questions

Error encountered when attempting to retrieve JSON data in JavaScript due to being undefined

Using the combination of PHP, AJAX, and MySQL, one can create a select filter that utilizes xmlhttp.open

Modify the background color of a pseudo-element's property value dynamically

Tips for concealing the ID value within a URL or parameter

Angular 4's Panel Window: A User-Friendly Interface

Error 404 occurred when trying to access the webpack file at my website address through next js

The tab key seems to be malfunctioning when triggered during a jquery change event

Simple guide on implementing React with Typescript to support both a basic set of properties and an expanded one

Automated task scheduled to execute every minute between the hours of 8am and 4.30pm using Cloudwatch Events

What could be the reason why the Google Maps API fails to load on Firefox?

Utilize two separate Ajax calls to populate individual jQuery tabs with specified content

Maintain the collapsing of links in the navbar with the help of Bootstrap

What are some creative methods to apply CSS styling to material-table in React?

Deciphering key-value pairs that are separated by commas

WordPress Media Library - Issue with select function not properly updating row index when updating ID

Learn how to smoothly scroll to the top of a div by clicking on a team name

¿What is preventing me from merging two arrays within this query handler?

What is the best way to add multiple lines of text to a webpage using the span element?

Sorting rows dynamically with jQuery Tablesorter

Words appear on the screen, flowing smoothly from left to right