Скопируйте несколько выбранных значений в текстовое поле из более чем одного раскрывающегося списка.

У меня есть выпадающие списки, как показано ниже.

<select id="checkOwner"  multiple="multiple" onchange="copyValue1(this)">
       <option value="FirstName">First Name</option>
       <option value="SecondName">Last Name</option>
      </select>
      <select id="checkMember" multiple="multiple" onchange="copyValue2(this)>
       <option value="FirstName">First Name</option>
       <option value="SecondName">Last Name</option>
      </select>

У меня есть ниже javascript для печати выбранных нескольких значений из раскрывающихся списков.

function copyValue() {

  var str = "";
  for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
  str+= option.value+" ";
}

document.getElementById('mytextbox').value = str;
  }
}

function copyValue2() {

  var str = "";
  for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
  str+= option.value+" ";
}

document.getElementById('mytextbox').value = str;
  }
}

Проблема в том, что когда я выбираю значения из первого, это значение печатается в текстовом поле. Но я выбираю значение из второго раскрывающегося списка. Первые напечатанные значения исчезли, а значения второго раскрывающегося списка напечатаны. Но я хочу сохранить все, и когда я снимаю галочку, я также хочу удалить это значение. Как я могу это сделать.


javascript drop-down-menu checkboxlist
person Dinu    schedule 02.06.2020    source источник
comment
Принимаете ли вы дубликаты в своем текстовом поле, что-то вроде имени, фамилии, фамилии, имени?   -  person Hardood    schedule 02.06.2020
comment
@Hardood да, принимать дубликаты.   -  person Dinu    schedule 02.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

Если вы принимаете повторяющиеся значения, это решение: я обновил ваш HTML-код в соответствии с вашими потребностями, добавив реальные значения в ваши раскрывающиеся списки вместо использования «Имя, Фамилия».

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
       <option value="John">John</option>
       <option value="Abeer">Abeer</option>
     </select>
    <br>

    <select id="checkMember" multiple="multiple" onchange="copyValue2()">
       <option value="Doe">Doe</option>
       <option value="Trump">Trump</option>
       <option value="Abeer">Abeer</option>
     </select>
    <br>
     <input type="text" name="mytextbox" id="mytextbox" size="200">

</body>

<script type="text/javascript">

function getOld(currentSelect)
{
  var x = [];
  for (var option of document.getElementById(currentSelect).options) {
   if (option.selected) {

       x.push(option.value);
     }
   }

   return x;
}

function copyValue() {

  x = getOld('checkMember');
  y = [];
  for (var option of document.getElementById('checkOwner').options) {
    if (option.selected) {
          y.push(option.value);
    }
    else
    {
        y = y.filter(value => value != option.value );
    }
  }
  x = x.concat(y);
   document.getElementById('mytextbox').value = x.join(' ');
}



function copyValue2() {
  x = getOld('checkOwner');
  y = [];
  for (var option of document.getElementById('checkMember').options) {
   if (option.selected) {
      y.push(option.value);
   }
    else
    {
        y = y.filter(value => value != option.value );
    }
  }
    x = x.concat(y);
   document.getElementById('mytextbox').value = x.join(' ');
}

</script>
</html>
person Hardood    schedule 02.06.2020
comment
Если я убираю значение, оно не удаляется, так как выбранное значение сохраняется в var old - person Dinu; 02.06.2020
comment
Ты сказал, что хочешь сохранить все. - person Hardood; 02.06.2020
comment
Я хочу удалить значение после снятия галочки. - person Dinu; 02.06.2020
comment
Я отредактировал вопрос. Я хочу, чтобы я хотел напечатать выбранное значение в текстовом поле. Но когда я снимаю галочку, выбранное значение должно исчезнуть. - person Dinu; 02.06.2020
comment
есть ли способ сохранить другой существующий текст с выпадающими выбранными значениями в текстовом поле - person Dinu; 02.06.2020
comment
Давайте продолжим обсуждение в чате. - person Hardood; 02.06.2020