"Enhance User Experience with a jQuery-powered Multiple Selection Dropdown Menu

Presently, I am in the process of customizing a multiple selection drop-down list using the features of the Multiple Selection Plugin. Here are the behaviors that I plan to implement for my customized selection:

  1. If the parent is selected, all children will be selected.
  2. If all children are selected, the parent will also be selected; if one child is deselected, then the parent will be deselected as well.
  3. When all children are selected, only the parent's name should appear in the selected field.
  4. The sub level should function like the 1st level too.

I have successfully accomplished (1), (2), and (4). However, I am still searching for a solution for (3).

Here is a sample JSON string representing the multi-selection:

var _str = '{"10":{"0":"0","1":"DISPONIBILITES","2":"t","style":"font-weight: bold;"},"16":{"0":"0","1":"TRESORERIE NETTE","2":"t","style":"font-weight: bold;"},...."}}}';

You can view the example I created at https://jsfiddle.net/skL589uu/7/.

Any insights or ideas on achieving behavior (3) would be greatly appreciated. Thanks!

javascriptjqueryhtmlcssdrop-down-menu

Answer №1

Custom logic is not necessary for this task, as the multi-select.js library offers a feature called optGroups.

All you need to do is organize the child items under the parent group in your HTML code and everything else will be automatically handled.

For more information, you can refer to the official documentation here: Multi-select OptGroups

HTML CODE:

<select multiple="multiple">
   <optgroup label="Group 1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </optgroup>
   <optgroup label="Group 3">
      <option value="15">15</option>
   </optgroup>
</select>

JQUERY CODE:

$(function() {
    $("select").multipleSelect({
        multiple: true,
        multipleWidth: 55,
        width: '100%'
    });
});

Check out the Live Demo on JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combine the values of properties in an object

I have a JavaScript object that contains various properties with string values. I want to concatenate all the property values. Here's an example: tagsArray["1"] = "one"; tagsArray["2"] = "two"; tagsArray["Z"] = "zed"; result = "one,two,zed" To prov ...

javascriptangularjs

Display a dynamic variable within React's HTML code

const fetchTime = () => { const currentDate = new Date(); const currentTime = currentDate + ' ' + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); return {currentTime}; } export default fun ...

javascripthtmlreactjs

What is the best way to implement clearInterval on window resize using jquery?

I've hit a roadblock with this issue that has been discussed numerous times. Despite trying every solution, I still can't figure out how to stop the animation from resizing the browser once it starts. Can anyone provide guidance on the correct ap ...

jqueryanimationresizeclearinterval

Currently, only the initial button is functional. I am uncertain if it is due to a script issue or if there is a rule that I inadvertently

As a beginner, I am eager to grasp the fundamentals and rules of Javascript. My goal is to create a basic example that involves a box with three buttons. However, I have encountered an issue where only one button seems to be functional despite having dis ...

javascriptbuttongetelementbyid

The div is struggling to contain the image, can anyone assist with this issue?

Greetings all! I am a beginner with CSS and currently working on my website. You can check it out at this link. I am facing an issue where the image on my site is not fitting properly and it keeps repeating. Can anyone guide me on how to fix this using CS ...

css

Is it possible to single out the final element having a specific CSS class in the absence of a parent container?

I have the following elements dynamically rendered in an HTML file. <div class="vehicle"></div> <div class="vehicle"></div> My requirement is to add a style float:right inside CSS class vehicle for the second el ...

htmlcsssass

How can I delay the execution of "onAuthStateChanged" until "currentUser.updateProfile" has completed?

Currently facing an issue with registering users in my Vue app. When a user registers, I need to trigger the updateProfile function to add more user data. However, the problem arises when the onAuthStateChanged function in my main.js is executed before the ...

javascriptfirebasevue.jsfirebase-authentication

Error: When using the ajax method, there is an issue with reading the 'forEach' property of an undefined object

Here's the ajax function I'm working with: <div class="quiz-box"></div> ... const url = window.location.href const quizBox = document.getElementById('quiz-box') let data $.ajax({ type: 'GET', url: ...

javascriptdjangoajax

Error: The property 'language' is undefined and cannot be read

Struggling to execute the App-test.js file provided by React Native in the __test__ directory: import 'react-native'; import React from 'react'; import App from '../src/app'; // Note: test renderer must be required after rea ...

javascriptreactjsreact-native

Converting JSON data into an array containing individual objects, and inserting a new item into each object

I've been working on retrieving data from a JSON file and successfully creating an array of objects. However, I am trying to add an item to each object in the array simultaneously. Check out my current code: var linklist = []; $.getJSON('links. ...

javascriptjqueryarraysjson

Discover the position of a chosen element using jQuery

Greetings! I am looking to retrieve the index of the column of a selected item in a table in order to create a color indicator in the header of the table. As the mouse moves, I want the header of the table containing the element to change color. Below is ...

jquery

ExpressJS/EJS autofocus problem with trix

As I work on setting up my blog using NodeJS/Express, I've encountered an issue with the Trix editor while trying to edit a post. The rich text area of the Trix editor automatically focuses, preventing any edits in other text areas on the page. Below ...

htmlnode.jsexpressejstrix

Using jQuery to dynamically create and select HTML elements

Is there a way to access the dynamically created HTML element by its ID in the code below? var line = $('<div class="showInGrid" id="removeMeLater"> <span class="dateP" id="calendar' + ind + '" ></span> ...

javascriptjqueryarraysfor-loop

Suboptimal recommendations for CSS selectors

I have a couple of questions regarding optimizing our outdated CSS for better performance. (1) I am concerned about the impact on browser rendering performance due to including printer-related CSS in a common.css file and applying the selectors to certain ...

htmlcssbrowsercss-selectors

I am encountering challenges with submitting the form

I am encountering an issue where I want to submit the form on button click and navigate to the next page, but instead I get an error message saying: "Form submission canceled because the form is not connected". Does anyone have a solution for this problem ...

htmlangulartypescriptnebularngx-admin

The commitment embedded in the MagicSuggest data feature

Having previously attempted to pose this question directly on Github, without much activity in the project, I am now turning to SO in hopes of finding assistance. My inquiry pertains to the possibility of returning a promise within the data function. Despi ...

javascriptjqueryajaxmagicsuggest

Adjusting Opentok React video to utilize the complete height of the encompassing container

I'm currently utilizing https://www.npmjs.com/package/opentok-react within my application and setting up a publisher and subscriber in a specific div. This is the CSS I have implemented: #videos { position: fixed; right: 0; bottom: 0; ...

cssreactjsopentok

Utilizing the .on method and selector parameter to retrieve properties of dynamically generated elements

I am currently dealing with dynamically created elements and I am seeking a way to access the attributes of a specific element after it has been clicked. The key is to identify these new child elements by their class name. Based on my research, using the . ...

jquery

Oops! Looks like there was a syntax error with the JSON data at position 1. This resulted in a 400

Having issues submitting form data in my Vue app with an express backend API. The endpoint works fine on postman but I keep getting errors like "SyntaxError: Unexpected token g in JSON at position 0" or "400: Bad Request." I've tried using JSON.parse ...

javascriptnode.jsexpressvue.jsaxios

Update the content within a div based on the selected option from a dropdown menu or

Is there a way to change the displayed text based on user input or selected option? By default, the text shown is "Aa Bb Cc Dd Ee...", but it can be changed by selecting different options. If text is typed into the input field, the displayed text will up ...

javascripthtmljquery