HTML посылает значения между двумя списками выбора

У меня есть этот Codepen, где мне нужно выбрать элемент из первого списка, который отправляет выбранный элемент на второй и наоборот. Проблема в том, что я не могу вернуть значения в первый список. Пожалуйста помоги.

https://codepen.io/anon/pen/oQgmbZ?editors=1010

<select id="S1" multiple class="form-control form-control-sm" style="height:90px; width:100%; min-width:400px; font-size:8pt; text-align:left;" onchange="SelectValues(this)">
  <option value='AAA'>AAA</option>
  <option value='BBB'>BBB</option>

</select> 
<select id="S2" multiple class="form-control form-control-sm" onclick="DeSelectValues();" style="height:90px; width:400px; min-width:400px; font-size:8pt; text-align:left;"></select>

JS:

function DeSelectValues() {
  //get the listbox object from id.
  var src = document.getElementById('S2');

  //iterate through each option of the listbox
  for (var count = src.options.length - 1; count >= 0; count--) {
    //if the option is selected, delete the option
    if (src.options[count].selected == true) {
      try {
        src.remove(count, null);
      } catch (error) {
        src.remove(count);
      }
    }
  }


  //var selval = $("#S2 option:selected");
  //var o = new Option(selval, selval);
  //$(o).html($(selval));
  //$("#A1").append(o);


}

function SelectValues(sel) {
    var selval = $("#S1 option:selected");
    var o = new Option(selval, selval);
    $(o).html($(selval));
    $("#S2").append(o);  
}

Всего 1 ответ


Кажется, вы хотите переместить узел из одного в другой.

Если вы просто передадите ссылку на <select>.append() выбранный <option> на метод <select>.append() , узел будет перемещен. Нет необходимости клонировать элемент select.

 function DeSelectValues() { var selval = $("#S2 option:selected"); selval[0].selected = false // deselecting $("#S1").append(selval); } function SelectValues(sel) { var selval = $("#S1 option:selected"); selval[0].selected = false // deselecting $("#S2").append(selval); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="S1" multiple class="form-control form-control-sm" style="height:90px; width:100%; min-width:400px; font-size:8pt; text-align:left;" onchange="SelectValues(this)"> <option value='AAA'>AAA</option> <option value='BBB'>BBB</option> </select> <select id="S2" multiple class="form-control form-control-sm" onclick="DeSelectValues();" style="height:90px; width:400px; min-width:400px; font-size:8pt; text-align:left;"></select> 


Есть идеи?

10000