Saya memiliki sampel JS kecil untuk mencoba menambahkan elemen option yang sama ke dua daftar select yang berbeda, tetapi tampaknya setiap kali saya mencoba melakukan ini, option hanya ditambahkan ke daftar kedua dua daftar, dan saya tidak yakin mengapa.

HTML:

<select id='one'></select>
<select id='two'></select>
<input type='button' value='click' onclick='ftn();' />

Javascript:

function ftn() {
    var one = document.getElementById("one");
    var two = document.getElementById("two");

    var option = document.createElement("option");

    option.value = "cool";
    option.innerText = "beans";

    one.appendChild(option);
    two.appendChild(option);
};

Hasil:

Result

Saya dapat mencapai hasil yang diinginkan dengan memiliki konten elemen option yang satu ini hadir di kedua daftar select, tetapi itu mengharuskan saya membuat dua elemen option yang berbeda, dan hanya menjadikan datanya sebagai sama.

Apakah ada cara saya dapat mencapai ini, dalam Javascript, hanya menggunakan satu elemen opsi?

Juga, inilah tautan ke CodePen yang saya tulis untuk ini: CodePen

0
Delfino 19 November 2020, 23:43

1 menjawab

Jawaban Terbaik

Kamu tidak bisa. Sebuah elemen hanya dapat memiliki satu induk, jadi untuk menambahkan elemen option yang sama ke dua daftar select yang berbeda, Anda harus menduplikasi option.

Dokumentasi MDN di appendChild mengatakan ini:

Metode Node.appendChild() menambahkan sebuah simpul ke akhir daftar turunan dari simpul induk yang ditentukan. Jika anak yang diberikan adalah referensi ke simpul yang ada dalam dokumen, appendChild() memindahkannya dari posisinya saat ini ke posisi baru (tidak ada persyaratan untuk menghapus simpul dari simpul induknya sebelum menambahkannya ke beberapa simpul lain).
Ini berarti bahwa sebuah simpul tidak dapat berada di dua titik dokumen secara bersamaan. Jadi jika node sudah memiliki parent, node tersebut dihapus terlebih dahulu, kemudian ditambahkan pada posisi baru. Metode Node.cloneNode() dapat digunakan untuk membuat salinan node sebelum menambahkannya di bawah induk baru. Perhatikan bahwa salinan yang dibuat dengan cloneNode tidak akan disinkronkan secara otomatis.

Jadi kode Anda menambahkan option ke select pertama, lalu memindahkannya ke yang kedua. Anda dapat mengkloning option untuk memasukkannya ke dalam kedua elemen select.

1
Amy 20 November 2020, 15:38