Próbuję przenieść wybrane opcje w Wybierz1, aby wybrać2 na przycisku click. To jest mój kod HTML:

<p>
<select id="select1" size="10" style="width: 25%" multiple>
    <option value="purple">Purple</option>
    <option value="black">Black</option>
    <option value="orange">Orange</option>
    <option value="pink">Pink</option>
    <option value="grey">Grey</option>
</select>
</p>

<button type="button" click.delegate="trig()">Add</button>

<p>
<select id="select2" size="10" style="width: 25%" multiple>
    <option value="white">White</option>
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    </select>
</p>

I oto mój kod JS zawierający przycisk

export class App {
  constructor() {
  }

  trig() {

  }
}

Co musiałbym umieścić w trig(), dzięki czemu kliknięcie przycisku przesunie wybrane elementy na inną listę?

3
Matthew 27 luty 2019, 08:21

2 odpowiedzi

Najlepsza odpowiedź

Możesz pętli przez selectedColors1 i zdobądź index każdego wybranego elementu. Następnie naciśnij je do color2 macierzy i wyjmij je z colors macierz jeden po drugim.

demo : CodesandBox

export class App {
  colors1 = [
    { id: "purple", name: "Purple" },
    { id: "black", name: "Black" },
    { id: "orange", name: "Orange" }
  ];

  colors2 = [
    { id: "white", name: "White" },
    { id: "red", name: "Red" },
    { id: "blue", name: "Blue" }
  ];

  selectedColors1 = [];
  selectedColors2 = [];

  add() {
    this.selectedColors1.forEach(selected => {
      // get the index of selected item
      const index = this.colors1.findIndex(c => c.id === selected);
      this.colors2.push(this.colors1[index]); // add the object to colors2
      this.colors1.splice(index, 1); // remove from colors1
    });
  }
}

HTML:

<select multiple value.bind="selectedColors1">
  <option repeat.for="color of colors1" model.bind="color.id">
    ${color.name}
  </option>
</select>

<button type="button" click.delegate="add()">Add</button> <br />

<select multiple value.bind="selectedColors2">
  <option repeat.for="color of colors2" model.bind="color.id">
    ${color.name}
  </option>
</select>
3
adiga 27 luty 2019, 16:23

Dodałem przycisk add zgodnie z obudową użycia. Proszę odnieść się poniżej linku i zaktualizowałem rozwiązanie. Chyba, że szukasz nieco tego samego.

Przykładowy stepllitz.

Jeśli potrzebujesz więcej pomocy, skomentuj to.

3
Sagar Kulthe 27 luty 2019, 18:24