Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Need help with selecting multiple options I'm utilizing the following plugin: https://github.com/selectize/selectize.js/blob/master/docs/usage.md

I have an object as displayed in the image below: https://i.stack.imgur.com/sQsKe.png

This is my Client script

//skills
$scope.$selectSkill = $('#selectSkill').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    placeholder: "Select Skills",
    options: $scope.data.skills,
    create: false,
    sortField: {
        field: 'name',
        direction: 'asc'
    }
});

This is my HTML

<select id="selectSkill" 
name="selectSkill" 
ng-model="selectSkill" 
multiple required> </select>

The loading process is going smoothly so far, https://i.stack.imgur.com/R8Byz.png

However, when I trigger a method, I receive some (two) values like this in response:

48c9eda9c0a8018b4b6aca082d5d1e41  ,  48c9fe9ac0a8018b6a37e4db0d07df09

I want to have these two values selected as shown in the image below https://i.stack.imgur.com/otHyV.png

Any suggestions on how to achieve this..?

I've attempted something along these lines:

var $select = $("#selectSkill").selectize();
                var yourDefaultIds = [slectedSkills.skills];  //(those 2 values)
                selectize.setValue(yourDefaultIds);;
javascriptarraysangularjsobjectselectize.js

Answer №1

//initialize skills selection process
var skillTemplate = finalTemplateObject.skills;
var skillsArray = skillTemplate.split(',');
var $skillSelect = $("#selectSkill").selectize();
var skillSelectize = $skillSelect[0].selectize;
skillSelectize.setValue(skillsArray);
skillSelectize.refreshOptions();
//finalize skills selection process

I have tested this code and it should work fine. Instead of setting as a string, convert the values into an array and then set them.

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

What is the best way to determine if a radio button has been chosen, and proceed to the next radio button to display varied information?

The goal is to display the <div class="resp"> below each radio button when it is selected, with different content in each <div class="resp">. The previously selected <div class="resp"> should be hidden when a new radio button is chosen. O ...

javascriptjqueryhtmlradio-button

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Exploring the Concept I have a unique idea to develop a landing page with a form that captures visitors' email addresses in a Google Sheet. After discovering a helpful post containing a Google App script for this purpose, I followed the guidelines o ...

javascriptjqueryajaxgoogle-apps-scriptcors

Clicking on a button within the parent element will enable you to remove the parent element multiple times with the use of VanillaJS

Within a ul element, each li contains multiple elements in the following structure: <ul> <li> <div> <p>some text </p> <button>delete</button> <div> </li> <li> ...

javascripthtml

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

When using the Openlayers Map scale line in Metric units, a specific zoom rate may be repeated twice during the zoom event, even though the actual zoom-in resolution varies on the map. In the provided link, you can observe that the zoom rates of 5km and ...

javascripttypescriptzoomingopenlayers

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

javascriptjqueryhtml

The Firestore query for viewing resources is currently not functioning as expected due to issues with

I'm currently working on implementing the "read" Rules from an array, following the guidelines in this blog post var db = firebase.firestore(); db.collection("_users").where("viewers", "array-contains", myUID) .get() .then((querySnapshot ...

javascriptangulargoogle-cloud-firestorefirebase-security

How to redirect to a different view or controller using ASP.NET and AngularJS

How can I open the View located at /Home/CreateItem after clicking on the Add button? What do I need to include in my code? $scope.Add = function() { console.log('working'); } This is how Index.cshtml looks like: <script src="~/ ...

javascriptasp.netangularjs

Endless cycle within the while loop without any obvious cause

I've been tinkering with a timer and thanks to some feedback I received in this community, everything is running smoothly. Here's what the current version looks like for reference: https://i.stack.imgur.com/Qd7ll.png Here's a snippet of my ...

javascriptjqueryhtmlwhile-loopinfinite-loop

Unexpectedly, the Discord bot abruptly disconnects without any apparent cause

Hey there! I've encountered an issue with my Discord bot - it keeps disconnecting after a few hours without any apparent cause! This particular bot is designed to regularly ping the Apex Legends game servers to check their status and display the ser ...

javascriptnode.jsdiscord.js

NodeJS closes the previous server port before establishing a new server connection

During my development and testing process, whenever I make changes, I find myself having to exit the server, implement the updates, and then start a new server. The first time I run the command node server.js, everything works perfectly. However, when I m ...

javascriptnode.jsexpress

The Redux store has been modified, yet the changes are not reflected in the

In my Posts.js component, I am mapping every object in the posts array. Within this function, I attempt to filter all notes that have the same post_id as the id of the current mapped post object and store them in a variable called filteredNotes. I then pas ...

javascriptreactjsreduxreact-redux

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

javascriptangulartypescriptrxjsjavascript-objects

"The implementation of real-time data retrieval through Socket.io is currently not functioning as expected

As a beginner in mean-stack, I tried to implement real-time data following some instructions but encountered errors. Can someone guide me on how to correctly use socket.io? I have provided my code below for fetching users from mongodb, kindly review and co ...

node.jsangularjsexpresssocket.iomean-stack

Deactivate the submit button when the form is not valid in angularjs

I am currently facing a challenge with my form that contains multiple input fields. To simplify, let's consider an example with just two inputs below. My goal is to have the submit button disabled until all required inputs are filled out. Here is wha ...

javascriptangularjsforms

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

I recently implemented an event listener for selectionchange in the following manner: document.addEventListener("selectionchange", function() { highlight(); console.log("selectionchange-triggered"); }, false); After that, I included the code bel ...

javascripthtmladdeventlistenerselectionchangeddesignmode

Can a website accurately identify my operating system and browser version even if my browser settings have been altered?

When using selenium to browse a website, I have modified the useragent, platform, and oscpu properties of the navigator object in my Firefox browser. Will the website be able to detect my actual operating system and browser version? ...

javascriptseleniumweb-scraping

Encountering a problem while trying to install ionic-native using npm

I encountered an error while working with npm and Angular: $ npm install ionic-native --save <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a6b5a3abaea9a287f6e9f7e9f7">[email protected]</a> /home/louisro/Doc ...

angularjsionic-frameworknpm

angular and node: troubleshooting the $http.get error

I have encountered an issue with the $http.get instruction. Without it on the main page, I receive a result of "random 46" which is correct. However, when I include $http.get, I get a result of "random {{ number }}". How can this problem be resolved? -se ...

javascripthtmlangularjsnode.jsget

Guide on exporting type definitions and utilizing them with npm link for a local package

I am in the process of developing a new testing tool called tepper as an alternative to supertest. My goal is to make this package available in both ESM and CJS formats. However, I'm encountering an issue where users of the library are unable to locat ...

javascripttypescriptnpmtypescript-typingsnpm-package

Leverage Jquery within the div element to manipulate the data retrieved from a post ajax request

On my one.jsp page, I have the following post code: $.post("<%=request.getContextPath()%>/two.jsp", { vaedre: fullDate} ,function(result){ $("#theresult").append(result); }); This code generates the followi ...

javascriptjqueryajaxjsp