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

Serve static assets files based on the route path instead of using absolute paths

What could be causing my cmd to report an error stating that it is unable to locate the node-modules

What are the best ways to optimize and capitalize on functionality in Electron.js?

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

Several treeviews for selecting data

Modal obstructing BsDatePicker

Traversing through objects in react.js

What is the best way to delete a CSS class from a specific element in a list using React?

watchify with gulp requires two saves to update modifications

utilizing the JavaScript SDK to send alerts to a user's friends on Facebook

Looking for a way to add interactivity to this canvas rectangle?

Creating a unique, random output while maintaining a log of previous results

Leveraging jQuery within a method defined in an object using MyObject.prototype.method and the 'this' keyword

Invalidating the memory in iOS 7.1.1 when using canvas drawImage

Click on the form to initiate when the action is set to "javascript:void(0)"

The JSON response is not being returned by the static React App hosted on Microsoft

Issue with Vue 3 where radio input remains unchecked after being clicked

Trouble with implementing Ajax in Express and jquery

Working with a Mix of Properties in Styled Components

No specification has been provided for the delivery