Creating a shared observable array in KnockoutJs to be used for multiple select elements

Question

Creating a shared observable array in KnockoutJs to be used for multiple select elements

When an employer needs to assign a specific employee and premium amount, they can click on the "Add Employee" button to reveal another form with a dropdown menu of employees and an input field for the premium amount.

<select>
    <option>John</option>
    <option>George</option>...
</select>

<input type="text" placeholder="Amount"/>

I am using a shared ko.observableArray to manage dynamically added select boxes and inputs, which is functioning properly...

An issue arises when the employer selects the same employee more than once (which is not ideal). I attempted to create a new array using ko.computed that would filter out previously selected employees, but so far without success.

Ideally, a selected option should be disabled or hidden from other dropdown menus.

Has anyone successfully addressed this issue before?

javascript select knockout.js share

Answer 1

Answer №1

After encountering a problem, I managed to find a solution in the following way:

To start off, I had to make some changes by replacing my

<selec data-bind="options: employyes">....

with a foreach loop and manually rendering my items like this:

<select data-bind="value: selectedEmployee, foreach: $root.employees, click: $root.updateEmployees, optionsAfterRender: $root.updateEmployees">
    <option value selected="selected" data-bind="visible: $index === 0">Choose...</option>
    <option data-bind="value: id, text: name, attr: {'disabled': disabled}"></option>
</select>

Subsequently, I created a function that updates the state of Employees every time a user clicks on the select element... This function loops through all employees and checks if an employee ID is selected in any form. If it is, the disable attribute is set to true; otherwise, it's set to false.

self.updateEmployees = function() {
        ko.utils.arrayForEach(self.employees(), function (employee) {
            var isEmployeeUsed = false;
            ko.utils.arrayForEach(self.forms(), function (form) {
                console.log(employee.id());
                if (typeof employee !== 'undefined' && typeof form !== 'undefined' && employee.id() === form.selectedEmployee()) {
                    isEmployeeUsed = true;
                }
            });

            employee.disabled(isEmployeeUsed);    
        });

Check out the JS Fiddle for this solution

Answer 2

After encountering a problem, I managed to find a solution in the following way:

To start off, I had to make some changes by replacing my

<selec data-bind="options: employyes">....

with a foreach loop and manually rendering my items like this:

<select data-bind="value: selectedEmployee, foreach: $root.employees, click: $root.updateEmployees, optionsAfterRender: $root.updateEmployees">
    <option value selected="selected" data-bind="visible: $index === 0">Choose...</option>
    <option data-bind="value: id, text: name, attr: {'disabled': disabled}"></option>
</select>

Subsequently, I created a function that updates the state of Employees every time a user clicks on the select element... This function loops through all employees and checks if an employee ID is selected in any form. If it is, the disable attribute is set to true; otherwise, it's set to false.

self.updateEmployees = function() {
        ko.utils.arrayForEach(self.employees(), function (employee) {
            var isEmployeeUsed = false;
            ko.utils.arrayForEach(self.forms(), function (form) {
                console.log(employee.id());
                if (typeof employee !== 'undefined' && typeof form !== 'undefined' && employee.id() === form.selectedEmployee()) {
                    isEmployeeUsed = true;
                }
            });

            employee.disabled(isEmployeeUsed);    
        });

Check out the JS Fiddle for this solution

Creating a shared observable array in KnockoutJs to be used for multiple select elements

Answer №1

Similar questions

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

Struggling to display a navigation menu on angular 1 with complex nested json structure

Tips for incorporating jQuery UI into Angular 6

What causes Three.js OBJ conversion to render as mesh successfully but log as undefined?

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

Angular: Clicking on a component triggers the reinitialization of all instances of that particular component

Replace the ngOnDestroy method

Exploring the capability of the Videoshow NPM module in conjunction with

Refreshing html in nodejs after a fetch promise remains in a pending state

Steps for deactivating a button until the form has been submitted

Hover over the first element to remove its class and replace it with a different element

What is the best way to isolate a single element within a for loop and exclude all others?

Formik integration issue with MUI DatePicker causing error message: "date.isBefore is not a function"

Django: The Art of Rejuvenating Pages

"Obtain a DOM element within an Angular directive by using the jQuery find method

Event handlers in JQuery are not connected through breadcrumb links

What is the best way to delete a jQuery.bind event handler that has been created for an event

What sets apart the CSS file directories in a React application compared to those in an Express server?

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

Generate new variables based on the data received from an ajax call