Estoy creando un sitio web que vende teclados y quiero transferir y mostrar varias opciones seleccionadas por un usuario en un campo de texto separado por comas (,). Intenté usar document.getElementById("product", "product2") pero No funciona.
Esto es lo que tengo por ahora.
<div class="input-name"> <label for="products">Cases: </label> <select name="product" id="product" class="larger" onchange="change()"> <option selected>--Please select--</option> <script>productlist1()</script> </select> </div> <div class="input-name"> <label for="products">Keycaps: </label> <select name="product" id="product2" class="larger" onchange="change()"> <option selected>--Please select--</option> <script>productlist2()</script> </select> </div> <div class="input-name"> <label for="subject" id="subjectLabel">RE: Enquiry on</label> <input type="text" name="subject" id="subject" class="subject_1" readonly> </div> function storeSub() { document.getElementById("product").selectedIndex = sessionStorage.productIndex; var product = document.getElementById("product").value; sessionStorage.subject = product; document.getElementById("subject").value = sessionStorage.subject; } function productlist1() { var select = document.getElementById("product"); var options = ["Case1", "Case2", "Case3", "Case4"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } } function productlist2() { var select = document.getElementById("product2"); var options = ["Keycaps1", "Keycaps2", "Keycaps3", "Keycaps4"]; for (var i = 0; i < options.length; i++) { var opt = options[i]; var el = document.createElement("option"); el.textContent = opt; el.value = opt; select.appendChild(el); } } function change() { var product = document.getElementById("product").value; sessionStorage.product = product; document.getElementById("subject").value = sessionStorage.product; }Puede adjuntar un detector de eventos de cambio changeSelection a ambos elementos de selección. Entonces, una vez que se selecciona algo o se cambia una selección, se invocará al oyente y el evento se pasará automáticamente como argumento. Ahora dentro del oyente changeSelection, puede obtener la opción seleccionada por event.target.value .
Puede usar un conjunto para realizar un seguimiento exclusivo de las selecciones. Para recuperar las selecciones como una cadena separada por comas, solo necesita convertir el Conjunto en una matriz y unirlo con una coma.
document.addEventListener("DOMContentLoaded", function(){ let select1 = document.getElementById("product"); let options1 = ["Case1", "Case2", "Case3", "Case4"]; options1.forEach(option => { let el = document.createElement("option"); el.textContent = option; el.value = option; select1.appendChild(el); }) select1.addEventListener('change', changeSelection) let select2 = document.getElementById("product2"); let options2 = ["Keycaps1", "Keycaps2", "Keycaps3", "Keycaps4"]; options2.forEach(option => { let el = document.createElement("option"); el.textContent = option; el.value = option; select2.appendChild(el); }) select2.addEventListener('change', changeSelection) }); const selections = new Set(); function changeSelection(event){ selections.add(event.target.value) let subjectInput = document.getElementById("subject"); subjectInput.value = Array.from(selections).join(','); } <div class="input-name"> <label for="products">Cases: </label> <select name="product" id="product" class="larger"> <option selected>--Please select--</option> </select> </div> <div class="input-name"> <label for="products">Keycaps: </label> <select name="product" id="product2" class="larger"> <option selected>--Please select--</option> </select> </div> <div class="input-name"> <label for="subject" id="subjectLabel">RE: Enquiry on</label> <input type="text" name="subject" id="subject" class="subject_1" readonly> </div>