CODEWITHSUNDEEP
javascriptformsbuttonhtml-select
Born2DoubleUp
Born2DoubleUp

Reputation: 109

Selecting Item from First Select Box to Populate Second Select Box

I have a form with two select fields. The first select field will list items, the second select field will start empty but be populated by selecting an item from the first and pressing the add button. You would also be able to do the same. You can select an item from the second select field and hit the remove to add it back to the first select field. In the end, I want all the values of the second select field to be in a hidden form box separated by commas.

I've come across examples of this with javascript in the past, but now that I need them I can't seem to find them. Does anyone know of any sources that could show me how to accomplish something like this? At first, I was thinking of doing it using ajax but I would rather do it without loading another page. Any help in pointing me in the right direction would be greatly appreciated! Thanks in advance!

<form name="SelectItem">
<select name="SelectItem">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
</select>
<button>Add =></button>
<button><= Remove</button>
<select name="SelectedItems">
    <option value=""></option>

</select>
</form>

Upvotes: 0

Views: 1078

Answers (3)

Tom O.
Tom O.

Reputation: 5941

Below is one relatively simple approach you can take that takes advantage of event delegation technique:

const inSelectEl = document.querySelector('#in-item-list');
const outSelectEl = document.querySelector('#out-item-list');
const optionQuantity = inSelectEl.options.length;

const onClick = e => {
  if (e.target.tagName !== 'BUTTON') {
    return;
  }

  let a, b;

  if (e.target.id === 'add') {
    a = inSelectEl;
    b = outSelectEl;
  } else {
    a = outSelectEl;
    b = inSelectEl;
  }

  const selectedOption = a.options[a.selectedIndex];

  b.options[b.options.length] = selectedOption;
}

document.querySelector('#container').addEventListener('click', onClick);
<!-- Added container to enable event delegation -->
<div id="container">
  <select name="SelectItem" id="in-item-list">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
  </select>
  <button id="add">Add =></button>
  <button id="remove"><= Remove</button>
  <select name="SelectedItems" id="out-item-list" />
</div>

Upvotes: 1

Addis
Addis

Reputation: 2530

You can use the add() and remove() methods on the select element:

const select1 = document.getElementById('select1')
const select2 = document.getElementById('select2')

const addItem = () => {
    event.preventDefault();

    if(select1.length === 0)    return;

    let itemIndex = select1.selectedIndex;
    let item = select1.options[itemIndex];

    select1.remove(itemIndex)
    select2.add(item);  
}

const removeItem = () => {
    event.preventDefault();

    if(select2.length === 0)    return;

    let itemIndex = select2.selectedIndex;
    let item = select2.options[itemIndex];

    select2.remove(itemIndex)
    select1.add(item);   
}

document.getElementById('addButton').addEventListener('click', addItem);
document.getElementById('removeButton').addEventListener('click', removeItem);
<form name="SelectItem">
  <select name="SelectItem" id="select1">
      <option value="item1">Item 1</option>
      <option value="item2">Item 2</option>
      <option value="item3">Item 3</option>
  </select>

  <button id="addButton">Add =></button>
  <button id="removeButton"><= Remove</button>

  <select name="SelectedItems" id="select2">

  </select>
</form>

Upvotes: 1

Marcelo The Mage Coder
Marcelo The Mage Coder

Reputation: 2202

You can use jquery append() to do it:

$(document).ready(function(){
  $('.add').click(function(){
    $('#select1').find('option:selected').appendTo('#select2');
  });

  $('.remove').click(function(){
    $('#select2').find('option:selected').appendTo('#select1');
  });  
});

Working pen

Upvotes: 2

Related Questions