What is the best way to display multiple select results/divs in descending order based on the most recent selection?

Is there a way to display the results (divs) in the order of the most recent selection when making multiple selections from a list? Currently, the results appear in the order they are listed in the box. For example, if I select Nuts, Meats, Vegetables, Fruits in that order, how can I make the results show Fruits, Vegetables, Meats, Nuts?

https://jsfiddle.net/djj2c84t/

jQuery.fn.filterByText = function(mytextbox) {
  // code for filtering options based on text input
};

$(function() {
  $('#mydropdown').filterByText($('#mytextbox'), true);
});

$(document).ready(function() {
  // code for handling changes in dropdown selection
});

I have been struggling with this issue for months and haven't found a suitable solution online yet. Any help or example code provided would be greatly appreciated since my knowledge in Javascript, JQuery, and CSS is limited.

Thank you.

Answer №1

Hopefully, I have correctly understood your issue.

For demonstration purposes, I have created this fiddle:

Edit:

Check out the Fiddle Example

It is recommended to use:

$('option').click(function () {});

instead of

$('#mydropdown').change(function() {});

What I did was redraw the desired div inside the "MainDiv" that I included

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

React CSS modules are a powerful tool for styling components in

Having some difficulty with css modules in react, I am unsure how to utilize react modules dynamically. import classnames from 'classnames' import styles from './hover.module.css /// /// const [flashElements,setFlashElements]=useState(elemen ...

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

Loading HTML div content on demand using AngularJS

I have been working on a project where I retrieve data from the server to update the data model on the client browser using one-way data binding. The structure of the data model is outlined below. In relation to this data model, I am displaying the conten ...

What sets apart a .json file from a .js file when incorporating them into three.js coding?

When working with three.js, both .json and .js files are utilized as object formats. What sets them apart from each other? Do they necessitate different loaders for loading the objects? I came across this three.js demonstration: . In the example, a .js fi ...

To transfer Rowdata to a different view upon clicking a link

Take a look at the code snippet I've included for JQGrid: click: function (e) { debugger; var id = $(e.target).closest("tr.jqgrow").attr("id"); rowdata = jQuery("#Emp ...

Using AJAX to submit a form to a CodeIgniter 3 controller

I am working on adding a notification feature and need to run an ajax query through the controller when a button is clicked. Here's the script I'm using: $('#noti_Button').click(function (e) { e.preventDefault(); ...

Whenever I create a div class and apply CSS styling to it, the styles are not being applied as expected

Greetings, I am fairly new to the world of programming. My question revolves around the use of the .logo class in my HTML file. Despite attempting to assign specific dimensions to the gif in my CSS snippet, it doesn't seem to be working as intended. ...

working with CSV files in JavaScript using AngularJS

Currently, I am working on building a simple angular application that can parse CSV input and populate a table with the extracted data. If you're curious about what I'm trying to accomplish, feel free to check out this Plunker demo - http://plnk ...

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

Imagine I have two connected Redux components. The first component is a simple todo loading and display container, with functions passed to connect(): mapStateToProps reads todos from the Redux state, and mapDispatchToProps requests the latest list of todo ...

What steps should I take to ensure my button remains intact and undamaged?

I'm encountering an issue with a CSS-styled button that appears distorted and displayed oddly across multiple lines when it is set as a link. However, if I change the button to an input element, it looks flawless. How can I ensure my link button displ ...

Maximizing Efficiency of Vendor Bundle in Angular 2 with Webpack

My MEAN application's client side is built in Angular2 with Webpack, but I'm facing slow loading times due to a large vendor modules JS file. Is there a way to optimize this situation? I want to separate the vendor's JS file. Below is my we ...

Here are the steps to follow in order to click on a cloned label, change the checkbox's checked property to false, then click on

I am currently working on improving a search filter feature. When users click on the filters (checkboxes and radio buttons), I want to display a clone of the corresponding label in a header section. If a user clicks on the checkbox or radio button again, t ...

Is there a way to display a PHP error message while submitting the form asynchronously?

Utilizing phpMailer in combination with AJAX to send emails. The objective is to send the email and then showcase any error messages from submit.php on contact.php Currently, every submission displays "Message sent" even if it was not actually sent. Con ...

Which programming language should I utilize to create a webpage that dynamically updates its content from a database?

Seeking advice on a complex task I'm facing. I'm currently managing a vast spreadsheet (266 rows with 70 columns, and growing) which serves as a database. I want to transfer this data from Excel to an intranet page. Currently, I'm using a mi ...

Interact with table cells using Angular's mousedown and mouseover events

I am looking to create a feature that highlights table cells when the mouse is pressed and hovered over a cell. Essentially, I want the cell to be highlighted whenever the mouse button is clicked and moved over it. However, in this example, there seems to ...

The functionality of the String prototype is operational in web browsers, but it encounters issues

Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...

Slick slider malfunctioning within bootstrap 4 framework

Despite following the instructions on the official slick slider website, I am encountering an issue where the slider is not working as expected. Instead of sliding through the images, they are being displayed on top of each other. Here is the code I have ...

Error message: The specified file or directory named '-stylus' could not be found

Encountered an error message while using stylus with npm on my Linux machine. After installing nodejs from GitHub, I executed the command npm install -g stylus autoprefixer-stylus and received the following error log: npm ERR! Error: EACCES, unlink ' ...

Guide on generating tabs with the power of Javascript and Jquery

Is it possible to create multiple tabs on a page using jquery or javascript, where clicking buttons on the menu slides in a new page without changing the URL? I already have the HTML and CSS prepared. div.tabContent.hide { display: none; } nav { bac ...

Using PHP to output a string within a JavaScript onclick function parameter

I am attempting to display a string in PHP as a string variable within a JavaScript function, but it is not appearing correctly. How can I resolve this issue? <?php $example1 = "example 1"; $example2 = "example 2"; $examp ...