Using Choices.js to inject live data into the select dropdown options

I am currently utilizing Choices.js for multi-select functionality and incorporating a select with a search box. Even though I am using Angular.js to populate the data, it does not appear to be functioning correctly. Is there anyone who can assist me in dynamically populating the options?

The data is retrieved through Ajax.

Here is what I have attempted:

<label for="docno" class="col-form-label">Name :</label>
<select id='docno' class="choices form-select" ng-model="docno" ng-change='getDocs()' required="true">
     <option ng-repeat="d in documents" ng-value="d.docno" selected='selected'>{{d.name}}</option>
</select>
javascriptangularjsajax

Answer №1

To implement setValue in the choices instance, follow the example below:

const choices = new Choices(document.getGetElementById("docno"));
const myChoices = [
    {
        value: 'Item 1',
        label: 'Option 1',
        id: 1
    },
    {
        value: 'Item 2',
        label: 'Option 2',
        id: 2
    }
];

choices.setValue(myChoices);

Answer №2

To successfully implement the default single select from choices.js, simply delete the data-trigger attribute and everything will function smoothly.

You can refer to the source code of choices.js demo here | Demo Link

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

Webdriverio: exploring the window object

I am experimenting with Webdriverio Testrunner using Selenium Standalone. I have encountered an issue while trying to check a global variable (window.myVar) in one of my tests. When attempting to return the window object, I am getting unexpected results i ...

javascripttestingselenium-webdriverwebdriver

Tips for filtering an array when the filter is within an Angular directive

My attempt at creating a general directive for filtering arrays in Angular is facing some issues. <body ng-controller="MainCtrl"> controller: <input type="text" ng-model="query.name" /> - works<br> directive: <span filter by=" ...

angularjsangularjs-directive

The API controller in C# is not receiving the array data as expected

Currently, I am developing an angularJS application where I am encountering an issue with sending an array of data to the API controller. Everything else is being successfully sent except for the array. Below is the code snippet used to make the controlle ...

c#angularjs

Enhance the functionality of the Bootstrap navbar by enabling the slideUp and slideDown effects

I can't get jQuery's slideUp and slideDown methods to smoothly animate the Bootstrap navbar. When I tried using the slideUp method, the navbar only slid up a little before disappearing completely, and the same issue occurred with the slideDown me ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing Selenium and Python to extract data from JavaScript tables via web scraping

I've come across numerous articles about Web Scraping, but I'm still struggling to figure out how to locate specific elements on a website. The site where I want to scrape the tables can be found here: My target tables are: "TB01," "TB02," "TB0 ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

Effectively detect the 'scrollend' event on mobile devices

When implementing the -webkit-overflow-scrolling: touch; style on a mobile element, dealing with scroll events can be quite challenging as they are triggered by various actions such as 'flicking', 'panning' and when the scroll comes to ...

javascriptjqueryioscordovahammer.js

What is the process of integrating an ejs view engine with express on Netlify?

Need help configuring the ejs view engine with netlify I attempted to set app.set('view engine', 'ejs'), but didn't see any results. const express = require('express'); const path = require('path'); const serv ...

javascriptexpressnetlify

Retrieve the location of the selected element

We are faced with the challenge of determining the position of the button clicked in Angular. Do you think this is achievable? Our current setup involves an ng-grid, where each row contains a button in column 1. When the button is clicked, we aim to displ ...

javascriptangularjs

A guide on incorporating the input type 'date' for date columns in jqGrid

When using jqGrid for inline editing, a date column is defined in the colmodel with accompanying JavaScript code. However, it can be cumbersome to maintain and produces an unattractive result. In instances where the browser supports it, how can one utiliz ...

javascriptasp.net-mvc-4datejqgridjqgrid-formatter

What is the reason for including parentheses when evaluating JSON data?

What is the purpose of adding ( and ) around the code when using eval? var strJson = eval("(" + $("#status").val().replace(";","") + ")"); Note: The result of $("#status").val() is similar to {"10000048":"1","25000175":"2","25000268":"3"}; ...

javascriptjson

What could be causing my if-else statement to malfunction in JavaScript?

I'm working on a form where certain conditions need to be met based on the selected order type. For instance, if a market order is chosen, the stop price and limit price should default to zero and become read-only fields. Similarly, selecting a limit ...

javascriptjquery

Type property is necessary for all actions to be identified

My issue seems to be related to the error message "Actions must have a type property". It appears that the problem lies with my RegisterSuccess action, but after searching on SO, I discovered that it could be due to how I am invoking it. I've tried so ...

javascriptangulartypescriptngrx

Create a new function that triggers an event when ng-show is used

As someone who is not an expert in Angular, I am trying to implement a functionality similar to "like/dislike". When viewing an article, you have the option to click on the "like" button. If you have already liked the article, the "like" button is hidden a ...

angularjs

React's Dynamic Table fails to rerender when updated values are placed in the same row and under the same header

Here is the table generated by my functional component: <table class="table"> {/* Consonant Table */} <tr> <th colSpan="2">---</th> {headersPOA. ...

javascriptreactjsdynamichtml-tablerender

Implement a Bootstrap button that can efficiently collapse all elements in one click

Within my HTML file, I have included the following code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="list-group list-group-flush"> <a href="javascript: void(0)" da ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

How can I use Angular to bind the text entered in an `input` within one `ng-repeat` `div` to another `div` within a different `ng-repeat`?

I am trying to create a dynamic Angular-based webpage where input tags are connected to h3 tags in separate DIVs. Below is the setup of my HTML page (as seen on Plunker): <!DOCTYPE html> <html> <head> <style type="text/css> ...

javascripthtmlangularjs

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

javascriptphpjqueryhtmlajax

What is the best way to adjust the priority of elements using JavaScript in an ASP.NET MVC application?

As part of my application, I need to create a function that allows for the changing of deputy priorities for each consultant. Here is what I have implemented so far: View: @model ML.Domain.DAL.DB_CONSULTANTS .... <table> <tr> < ...

javascriptasp.netajaxasp.net-mvc

How to retrieve element from templateUrl in AngularJS controller

I am facing a challenge in populating select(option) element inside a template html file from the controller. Although I have managed to do it successfully, I am unable to set a default value to avoid the initial empty option. Here is a snippet from the t ...

javascriptangularjs

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript