Picked (chosen-js): Steps to deselect options using a variety of selectors

I am currently using the Chosen library on Vue and Webpack for my project. I have a scenario where I need to cancel a selection when multiple options are selected, but I am struggling to achieve this. Can anyone guide me on how to cancel a selected option?

<script>
import $ from 'jquery';
window.$ = window.jQuery = $;
import chosen from 'chosen-js';
import 'chosen-js/chosen.css';

export default {
    mounted: function() {
        $('.select').chosen({
            width: '100%',
        }).change(function(ev, result) {
            if (result.selected === 'aaa') {
                // TODO: cancel selected
                console.log('selected', result.selected);
            }
        });
    },
};
</script>

<template>
    <select class="select" multiple>
        <option>aaa</option>
        <option>bbb</option>
        <option>ccc</option>
    </select>
</template>
javascriptvue.jsjquery-chosen

Answer №1

The solution was implemented using the code snippet below.

$('.select-company').chosen({
    width: windowWidth,
}).change(function(event, selection) {
    if (selection.selected !== 'desired value') {
        return;
    }

    let values = $('.my-selector').val();
    for (let index = 0; index < values.length; ++index) {
        if (values[index] === selection.selected) {
            values.splice(index, 1);
            --index;
        }
    }

    $('.my-selector').val(values);
    $('.my-selector').trigger('chosen: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

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Trying to understand how async functions and the Joi.validate() function behave. Below is a function used for validating user input. const Joi = require("joi"); const inputJoiSchema= Joi.object().keys({ name: Joi.string(), email: Joi.string().require ...

javascriptnode.jsexpressasync-awaitjoi

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

javascriptjqueryhtmlfont-awesome

Choosing an option from a PHP MySQL table based on a JavaScript value

I am attempting to create a select box that displays a value based on whether the database has a "yes" or "no" in the specified column. Despite my efforts, I am unable to identify any syntax errors causing this code snippet to not function properly. JavaSc ...

javascriptphphtmlmysql

Transferring data from PHP to AJAX and then injecting it into an SQL query

I've been attempting to pass a datepicker variable into an onclick ajax function, which then sends it to another ajax method that passes the variable to an SQL query. The result of the query is then passed back into the ajax function to generate a cha ...

javascriptphpajax

Incorporate dots into every slide using the React Slick slider

When implementing a slider in React.js, I use React Slick. The API provided by React Slick allows us to easily incorporate previous and next buttons on each slide using the Previous and Next methods. However, I am curious about how to achieve the same fun ...

javascriptreactjsecmascript-6slick.jsreact-slick

After the ajax request is made in React JS, the column vanishes from the screen

Upon querying a node.js server's PostgreSQL database, I receive specific data that needs to be displayed in two separate tables. Each table consists of two columns. However, after the AJAX call, only the first column is being populated in the first ta ...

javascriptjqueryajaxreactjs

Leveraging Vuejs 2 with VUEX for seamless data-binding during data editing

I am currently facing an issue with my user profile section's edit functionality. I am using vuex to store the user profile data and retrieving it into the form. The edit form is nested in a child component of userProfile, where the data gets loaded a ...

data-bindingvue.jsvuejs2vue-routervuex

Trigger a callback in ASP.NET's CallbackPanel using JavaScript every 10 seconds

I am attempting to automatically trigger the callback of a CallbackPanel using JavaScript in my WebFormUserControl every 10 seconds. While I can trigger it with an ASPxButton and ClientSideEvents, my ultimate aim is to have it start automatically every 10 ...

javascriptc#asp.netcallback

"Utilizing the power of mapping in React to dynamically generate and return an

Hello everyone! I'm currently working on a project where I am making a get request to a Google API and fetching some data. Initially, the state value is empty, but after receiving the ajax response, I expect the state values to be updated using setSta ...

javascriptreactjs

Retrieving a page using jQuery

Below is the JavaScript code that I am using: $.ajax({ url: "test.html", error: function(){ //handle error }, success: function(){ //perform actions here with the received data } }); After retrieving test.html, I am wo ...

javascriptjqueryhtmlcssajax

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

cssvue.jsbootstrap-4vuejs2

Managing a webpage using Xcode and Swift's UIWebView

Recently, I developed a straightforward application that guides users to a web-based platform. One of the app's pages allows users to search for store stock from various stores by manually inputting the store number or utilizing automatic location det ...

javascriptuiwebviewswift3xcode8

What is the best way to handle passing the "img" object to an onload event handler in ReactJS JSX?

I am currently working on an img element that I want to be able to listen for the onLoad event. However, I also need access to the image object itself in order to check properties like width and height. Since these images are generated dynamically, I won&a ...

javascriptreactjs

Error encountered in React: When a parent component tries to pass data to a child

I have a Quiz object that I need to pass a single element of (questionAnswerPair) to a child component called QuestionAnswer. Although the Quiz data is fetched successfully and iterated through properly, there seems to be an issue with passing the Questio ...

javascriptreactjsjsonreact-hooks

How can I use a string argument in JavaScript to sort an array of objects by that specific value?

Currently, I am implementing React and facing a challenge with creating a reusable sorting component. This component is meant to sort an array of objects based on a specific property field. For instance, imagine having an array of objects with properties a ...

javascriptarrayssortingobject

Having trouble getting $.ajax to function properly in conjunction with fullcalendar js?

Currently in the process of utilizing the Smart Admin Theme, specifically focusing on the functionality within the calendar page. The calendar's core features are operational, allowing for the creation and placement of new events on the map. My curr ...

javascriptjqueryajaxfullcalendar

Unable to render any charts with angular-chart.js

Utilizing the dependency angular-chart.js in my angular project has allowed me to showcase data visualizations on my admin page. Recently, I decided to upgrade angular-chart.js to version 1.1 and Chart.hs to version 2.5 based on the README.md guidelines o ...

javascriptangularjschartschart.jsangular-chart

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

javascriptphpjqueryhtmllaravel

Adding a specialized loader to vue-loader causes issues when the template contains personalized elements

My vue2 component is structured as follows: <template> <p>Hello world</p> </template> <script> export default { name: 'Example' }; </script> <docs> Some documentation... </docs> In addition, I& ...

javascriptvue.jswebpackvuejs2vue-loader

What is the best way to sort and organize JSON data?

Upon successful ajax call, I receive JSON data structured like this: var videolist = [ { "video_id": 0, "video_name": "Guerrero Beard", "timelength": 15 }, { "video_id": 1, "video_name": "Hallie Key", "timelength": 8 }, { ...

javascriptjqueryjson