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

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

Creating a recursive setTimeout loop using Coffeescript

Can someone provide guidance on how to send serialized data using a jQuery.getScript() request?

Nodemailer is functioning properly in a local environment, however, it is encountering issues when

The React component patiently waits for the necessary props before rendering

Angular Automatically Generated Identifier for Event Detection

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

Encountering a 500 internal server error while attempting to submit data to a Laravel project through Axios in Vue.js

Create a fresh CSS class using the Chrome developer tool

Transferring information between two components in separate Angular 4 modules

Oops! Looks like there was an error: weight is not defined when trying to calculate BMI with the HTMLButtonElement

Switch up the Background using .css and jCarousel

What steps should I take to solve this wheel-related issue in my Vue 3 application?

Tips on how to correctly pass a .JSON object in the setState function of a reactJS

Expanding a JSON data structure into a list of items

Ways to customize the border color on a Card component using React Material UI

Navigating the world of getElementById and addEventListener outside of the DOM

The onchange() function appears to be undefined, could it be inaccessible from the index.html file?

How can we separate XML data retrieved from an Ajax call using jQuery?

Unlocking the power of popups with Angular