move option from one select to another select with JS-CodePudding

From two html selects, I would like to move when I click the button to move an option to another select with javascript vanila, and when it has been moved, it is removed from the select from where it was at the beginning. It should also work the other way around.

function move1() {
  var x = document.getElementById("select1");
}

function move2() {}

<select id="select1">
  <option value="0">1</option>
  <option value="0">2</option>
  <option value="0">3</option>
</select>
<button type="button" onclick="move1()">&gt;&gt;</button>
<button type="button" onclick="move2()">&lt;&lt;</button>
<select id="select2"></select>

CodePudding user response：

You can do it like this:

Fetch both selects with getElementById() and store them in select_1 and select_2 variables.
Check if selected option exists by compering selectedIndex property of the select with -1. It will be equal to -1 only if the user didn't select anything.
If selectedIndex is equal to -1, then do nothing because there is nothing to transfer to second select.
If selectedIndex is different from -1, it means that user selected something and option with that index should be transfered.
Create new option for second select with document.createElement('option') and copy the selected option values to the new option.
Remove the selected option of current select with select.options.remove(select.selectedIndex)

function move1() {
  const select_1 = document.getElementById("select1");
  const select_2 = document.getElementById("select2");
  
  if(select_1.selectedIndex !== -1) {
    const selected_option = select_1.options[select_1.selectedIndex];
    
    let new_option = document.createElement('option');
    new_option.value = selected_option.value
    new_option.innerHTML = selected_option.innerHTML;
    select_2.appendChild(new_option);
    
    select_1.options.remove(select_1.selectedIndex)
  }

}

function move2(){
  const select_1 = document.getElementById("select1");
  const select_2 = document.getElementById("select2");
  
  if(select_2.selectedIndex !== -1) {
    const selected_option = select_2.options[select_2.selectedIndex];
    
    let new_option = document.createElement('option');
    new_option.value = selected_option.value
    new_option.innerHTML = selected_option.innerHTML;
    select_1.appendChild(new_option);
    
    select_2.options.remove(select_2.selectedIndex)
  }
  
}

<select id="select1">
  <option value="0">1</option>
  <option value="0">2</option>
  <option value="0">3</option>
</select>
<button type="button" onclick="move1()">&gt;&gt;</button>
<button type="button" onclick="move2()">&lt;&lt;</button>
<select id="select2"></select>

CodePudding user response：

Here's a version that can manage more than 2 sets of <select> and <button> pairs. If there are more than 2 pairs, all recieving <select> will add the selcted <option>. All details are commented in the example.

/* 
Collect all buttons into a HTMLCollection then convert it into 
an Array. Same with all select
*/
const btnArray = [...document.querySelectorAll('button')];
const selArray = [...document.querySelectorAll('select')];

/*
Iterate through the array of buttons. Register each button to 
the click event. The event handler is switchOpt(e)
*/
btnArray.forEach(btn => btn.addEventListener('click', switchOpt));

// Event handler always passes the Event Object
function switchOpt(e) {
  /*
  Determine the select that will send it's option by matching 
  it's #id vs this.name (the [name] of the button the user 
  clicked
  */
  const from = document.getElementById(this.name);
  // if the select doesn't have any options end function
  if (from.childElementCount < 1) return;
  /*
  Determine the select that adds an option by .filter() under 
  the condition that it is NOT >from<
  */
  let to = selArray.filter(sel => sel.id != from.id);
  // Rereference >to< to be the select with the array
  to = to[0];
  // Determine which option has been selected
  const opt = from.options[from.selectedIndex];
  // Make a copy of the selected option
  const copy = opt.cloneNode(true);
  /*
  Add >copy< to >to< the second parameter is the index of the
  element that >copy< will be placed before it so it'll always 
  be in order
  */
  to.add(copy,  copy.dataset.idx);
  // Remove the option from >from<
  opt.remove();
}

<!-- Assign each option a data attribute wuth the value of it's index-->
<select id="A">
  <option data-idx='0' value="1">1</option>
  <option data-idx='1' value="2">2</option>
  <option data-idx='2' value="3">3</option>
</select>
<button name='A' type="button">&gt;&gt;</button>
<button name='B' type="button">&lt;&lt;</button>
<select id="B"></select>