Is there a way to exchange the chosen options between two bootstrap-vue multiple select boxes?

Question

Is there a way to exchange the chosen options between two bootstrap-vue multiple select boxes?

Is there a way to switch the selected options between two bootstrap-vue multiple select boxes? I am trying to create a UI similar to the image shown below but I am struggling with writing the method.

This is how I have written the template:

https://i.sstatic.net/QZYoy.png

<template>
  <b-row
    align-v="center"
  >
    <b-col cols="5">
      <b-card header="A Multiple Select" no-body>
        <b-card-body>
          <b-overlay :show="selectedBusyFlag" opacity="0.6">
            <b-form-select
              v-model="inActiveSelected"
              :options="inActiveOptions"
              multiple
            ></b-form-select>
          </b-overlay>
        </b-card-body>
      </b-card>
    </b-col>
    <b-col cols="2">
      <b-row>
        <b-col align="center">
          <b-button
            variant="link"
            class="button-pattern-throw"
            @click="
              moveOptionsToSelect(
                inActiveSelected,
                inActiveOptions,
                activeSelected,
                activeOptions,
                'DIRECTION_001',
              )
            "
          >
            <i class="fas fa-arrow-circle-right"></i>
          </b-button>
        </b-col>
      </b-row>
      <b-row>
        <b-col align="center">
          <b-button
            variant="link"
            class="button-pattern-throw"
            @click="
              moveOptionsToSelect(
                activeSelected,
                activeOptions,
                inActiveSelected,
                inActiveOptions,
                'DIRECTION_002',
              )
            "
          >
            <i class="fas fa-arrow-circle-left"></i>
          </b-button>
        </b-col>
      </b-row>
    </b-col>
    <b-col cols="5">
      <b-card header="B Multiple Select" no-body>
        <b-card-body>
          <b-overlay :show="selectedBusyFlag" opacity="0.6">
            <b-form-select
              v-model="activeSelected"
              :options="activeOptions"
              multiple
            ></b-form-select>
          </b-overlay>
        </b-card-body>
      </b-card>
    </b-col>
  </b-row>
</template>
<script>
...
moveOptionsToSelect(selected1, option1, selected2, option2, direction) {
        const select1Model = selected1;
        const select1Option = option1;
        const select2Model = selected2;
        const select2Option = option2;
        if (direction === 'DIRECTION_001') {
          // select A to select B
        } else if (direction === 'DIRECTION_002') {
          // select B to select A
        }
    },
...
</script>

Even though I have created different paths based on the "direction string" in the "moveOptionsToSelect" function, the execution stops after that point.

I would appreciate any assistance!

javascript vue.js bootstrap-vue

Answer 1

Answer №1

To manage the two select elements, I recommend using separate arrays for each. One approach is to remove an item from the first array and add it to the second array based on user interaction. It's important to make copies of the options in order to prevent immediate modification when switching between selections.

Answer 2

To manage the two select elements, I recommend using separate arrays for each. One approach is to remove an item from the first array and add it to the second array based on user interaction. It's important to make copies of the options in order to prevent immediate modification when switching between selections.

Answer 3

Answer №2

By utilizing the following code snippet, I was able to resolve the issue.

After submitting my initial question, I formulated a new perspective and delved deeper into the problem. Subsequently, I drafted the necessary code modifications which led to successful resolution.

I trust that sharing this approach will benefit individuals encountering a similar challenge.

    rearrangeOptions(direction) {
      let movableObjects;
      if (direction === 'LTR') {
        movableObjects = this.inactiveOptions.filter(elm =>
          this.inactiveSelected.includes(elm.value),
        );

        this.inactiveOptions = this.inactiveOptions.filter(
          elm => !this.inactiveSelected.includes(elm.value),
        );
        this.inactiveSelected = [];

        this.activeOptions.push(...movableObjects);
      }
      else if (direction === 'RTL') {
        movableObjects = this.activeOptions.filter(elm =>
          this.activeSelected.includes(elm.value),
        );

        this.activeOptions = this.activeOptions.filter(
          elm => !this.activeSelected.includes(elm.value),
        );
        this.activeSelected = [];

        this.inactiveOptions.push(...movableObjects);
      }
    },

Answer 4

By utilizing the following code snippet, I was able to resolve the issue.

After submitting my initial question, I formulated a new perspective and delved deeper into the problem. Subsequently, I drafted the necessary code modifications which led to successful resolution.

I trust that sharing this approach will benefit individuals encountering a similar challenge.

    rearrangeOptions(direction) {
      let movableObjects;
      if (direction === 'LTR') {
        movableObjects = this.inactiveOptions.filter(elm =>
          this.inactiveSelected.includes(elm.value),
        );

        this.inactiveOptions = this.inactiveOptions.filter(
          elm => !this.inactiveSelected.includes(elm.value),
        );
        this.inactiveSelected = [];

        this.activeOptions.push(...movableObjects);
      }
      else if (direction === 'RTL') {
        movableObjects = this.activeOptions.filter(elm =>
          this.activeSelected.includes(elm.value),
        );

        this.activeOptions = this.activeOptions.filter(
          elm => !this.activeSelected.includes(elm.value),
        );
        this.activeSelected = [];

        this.inactiveOptions.push(...movableObjects);
      }
    },

Is there a way to exchange the chosen options between two bootstrap-vue multiple select boxes?

Answer №1

Answer №2

Similar questions

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

What is the best method to fetch a specific post from supabase for showcasing in a dynamic Route with Nextjs14?

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

A comparison of parent and child components

Both the maxlenght and ng-maxlength directives appear to be ineffective in AngularJS

Include personalized headers to the 'request'

Tips for uploading images in Next.js using Firebase

Sending a C# variable to an HTML file

pick out particular values from an array

Preserving the top line or heading while cutting through a table

Customizing pressed row styles and properties within a map iteration in React Native

Rearrange the items in an array that contain different data types

Ajax polling ceases the polling process when an internet connection is lost

When I click on the left side menu, it should automatically scroll upwards

What could be causing my GET route to return an empty array?

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

execute field function prior to sorting

What's the best way to enable touch scrolling for items within a div container?

I attempted to implement a login feature using a prompt within a React application, but I encountered a situation where the browser asked me for the same details twice. How can I resolve

Issue with jQuery AJAX request not working as expected