Troubleshooting problem with hiding options in Jquery Chosen

Utilizing the chosen multiple selection feature, I have encountered an issue where selected options remain visible after being hidden and updated.

Here is the code snippet:

$("#ddlcodes").find("option[value ='" + codeValue + "']").hide();
$("#ddlcodes").trigger("chosen:updated");

Despite attempting to hide selected options upon adding them, some still remain visible while others are successfully hidden.

Below is the DOM HTML structure:

<select id="ddlcodes" class="form-control code-change" style="display: none;"><option value="488" style="display: none;">33210</option>
<option value="489" style="display: none;">33213</option>
<option value="487">33208</option>
<option value="492">33284</option>
<option value="486">33207</option>
<option value="490">33216</option>
<option value="496">75724</option>

Hidden values are not being removed from the dropdown list as intended. You can refer to the screenshot below for clarification:

https://i.sstatic.net/O4lBL.png

https://i.sstatic.net/Y7BU0.png

I am seeking a solution to completely remove these options from all instances. Any advice would be greatly appreciated. Thank you.

Answer №1

Give this a shot

   $("#codesDropdown").trigger("liszt:updated"); 

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

Discover the process of selecting an item from a list and viewing it on a separate page with the help of AngularJS and Ionic technology

I am struggling with creating a list of items that, when clicked, should take me to the corresponding post. Despite trying to use ng-click in the header, I suspect there is an issue with the route not functioning properly. As part of my testing process, I ...

Attention all beginners: there is an issue with the navigation bar where the section below is overlapping it. Additionally, assistance is needed in understanding how to set limits for

Greetings to all. I'm encountering an issue while setting up my first Bootstrap Nav bar. Although I've managed to make it work, the section right below it is overlapping the navbar (I can only see the navbar if I use a z-index of -1, but then the ...

Interactive tool for crafting dynamic web experiences

I am in the process of developing a straightforward hosting website for my projects. However, I have noticed that many software options feature a split view for editing code and previewing changes, such as Dreamweaver. I am on the lookout for a live edito ...

JavaScript - Combine objects by summing values with matching keys

Below is the given array : [ { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": "Pen", "Quantity": "1120" }, { "Date": "2019.07.08", "Organisation": "A", "Client": "Client1", "Product": " ...

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

Tips for extracting value from a button inside a while loop in a modal

As I was working on my code, I encountered an issue with displaying pictures in a modal when a user clicks on a button. Here is the code snippet that I used to display the products and set up the session to store the selected picture for the modal. However ...

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. https://i.sstatic.net/Ce216.png The project is being developed in next.js. Below are the relevant co ...

What are the steps to extracting JSON data in Node.js?

I am currently utilizing the API's node wrapper provided by MySportsFeeds. You can find more information about it here: https://github.com/MySportsFeeds/mysportsfeeds-node/blob/master/README.md The API call is functioning smoothly and the data is aut ...

When trying to publish a new post using postman, the content including the title, message, and image is not displaying

I am currently learning how to build a REST API by following a tutorial. Below is an excerpt from my server.js file: import express from 'express'; import compression from 'compression'; import bodyParser from 'body-parser'; ...

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

Updating a select menu with AJAX without the need for a <div> tag within the form

Utilizing an ajax call to dynamically update a select menu is a common practice. The ajax call fetches the options from a separate .php file and populates the select menu accordingly. Below is the code snippet for inserting the dynamic content using JavaS ...

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

Communication between child and parent components in Vue.js is an essential feature

Attempting to invoke functions from my component to Vue for the login process. This is the code snippet of my component : Vue.component('auths', { data: function() { return { ip: '', sessiontoken: '' } ...

Leverage the power of Next.js Dynamic routing query object with an SWR fetch request

While working with Next.js dynamic routing, I am facing an issue where my SWR fetch request is being called before the query object is properly set. This occurs specifically when using the routing query object. Let's take the example of a dynamic rou ...

``There seems to be an issue with the Express app when trying to access it

I have set up an express app that I want other devices on the same WIFI network to access without requiring internet connectivity. The main computer hosting the app is assigned with a fixed IP address: 192.168.1.60 In my server.js file, I have included t ...

Error: Unable to find axios module

screenshot of browser developer tool - network I have embedded the script in my base.pug file script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js') Upon loading the page and inspecting the browser developer tool > n ...

The inputs for Node express middleware are unclear and lack definition

I am currently exploring Node.js as a potential replacement for my existing DOT NET API. I have created middleware to enforce basic non-role authorization in my application, but I am encountering compilation problems with the function inputs. Compilation ...

including a comma in the jQuery counter

We are facing a challenge with our animated counter. Currently, it counts up quickly to a number without commas for thousands. Despite being well-versed in this area, we are struggling to implement the comma feature. Our existing code functions perfectly ...

Create a stylish layout with two div elements positioned side by side using flexbox for a responsive design

Struggling with my portfolio website, I encountered a challenge. I attempted to place two divs side by side, each containing text and an image. While the initial setup was simple, trying to make it responsive using flexbox has proven to be quite frustratin ...

Exploring the Depths of Angular Reactive Forms with Recursion

Dealing with recursion and form groups app-root.component.html <div [formGroup]="form"> some content <app-root></app-root> </div> Is it possible to implement the same form group and form controls in my recursive structure? For ex ...