data transfer multiple var-CodePudding

I'm making a website that sells keyboards stuff and I want to transfer and display multiple options selected by a user in a text field separated with commas(,) I tried using document.getElementById("product", "product2") but it does not work.

Here's what I have for now.

<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; 
}

CodePudding user response：

You can attach a change event listener changeSelection to both select elements. So once anything is selected or a selection is changed, the listener will be invoked and the event is automatically passed as an argument. Now Inside changeSelection listener, you can get the selected option by event.target.value.

You can use a Set to uniquely keep track of the selections. To retrieve the selections as a comma-separated string, you just need to convert the Set to an array and join it with comma.

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>