Отобразить выбранные элементы в списке - PullRequest
Новая
       95

Отобразить выбранные элементы в списке

1 голос
/ 04 мая 2020

Как отобразить выбранные элементы в списке?

Чтобы элементы, выбранные в селекторе, отображались в списке под ним.

Пример кода: 

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

</body>
</html>

Каким должен быть результат: 

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

Selected items:

<ul>
  <li>1</li>
  <li>3</li>
</ul>

</body>
</html>

Ответы [ 4 ]

2 голосов
/ 05 мая 2020

Вам нужно проверить, существует ли выбранный вами объект или нет, и создать его. 

if( document.getElementById("mySelect") != undefined) {
  document.getElementById("mySelect").remove();
}
var selectList = document.createElement("select");

И вы map функция для создания параметров, выбранных в change дескриптор события как 

 function change (options) {
   var parent = document.getElementsByClassName("md-form")[0];
   if( document.getElementById("mySelect") != undefined) document.getElementById("mySelect").remove();
    var selectList = document.createElement("select");
   let selected = [...options].filter(o => o.selected).map(o => {
   
    selectList.id = "mySelect";
    selectList.multiple = "multiple";
    parent.appendChild(selectList);
    var option = document.createElement("option");
    option.value = o.value;
    option.text = o.text;
    selectList.appendChild(option);

   });
   
 }
<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required onchange="change(this.options);">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    
    
</div>

</body>
</html>
1 голос
/ 05 мая 2020

Другой подход заключается в том, чтобы сделать что-то подобное (добавлены примечания внутри кода): 

const userSelection = document.querySelector('[name="users"]'); // select element
const userSelect = document.querySelector('ul'); // list container
userSelection.addEventListener('change', function() { // add event listener to change of the select
  const options = userSelection.querySelectorAll('option'); // list of options
  options.forEach(option => { // iterate them
    if(option.selected == true) { // if one of them selected
      const newLI = document.createElement('li'); // create li element
      newLI.textContent = option.value; // add the value of selected option as text content
      newLI.addEventListener('click', function() {  userSelect.removeChild(this); }); // BONUS: remove list item with click
      userSelect.appendChild(newLI); // append the new created li element to the list
    } 
  });
});
<div class="md-form">
  <select name="users" multiple="multiple" required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<ul></ul>

Надеюсь, это поможет!

0 голосов
/ 05 мая 2020

Вы можете использовать следующее: 

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

<div class="md-form">
    <select name="users" multiple="multiple"
            required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<script>
// References to elements
var select = document.querySelector('select'),
  options = Array.from(select.querySelectorAll('option')),
  form = document.querySelector('.md-form'),
  ul = document.createElement('ul');

// Variables with information
var selected = [];

select.addEventListener('change', function() {
  selected = [];
  ul.innerHTML = '';

  options.map(function(el) {
    if (el.selected) selected.push(el);
  });

  if (selected.length) {
    selected.map(function(el) {
      var li = document.createElement('li');

      li.textContent = el.textContent;

      ul.appendChild(li);
    });

    form.appendChild(ul);
  } else {
    form.removeChild(ul);
  }
});
</script>

</body>
</html>

Рабочая скрипка: https://jsfiddle.net/1j7a9h35/

0 голосов
/ 04 мая 2020

Я думал, что вы могли бы использовать JavaScript (JS) как способ получить выбранные элементы и вставить их в другое место (где вы хотите).

Попробуйте это: 

<!DOCTYPE html>

<html lang="en">

<head>
</head>
<body>

    <select id="select" name="users" multiple="multiple"
            required>
        <option class="option" value="1">1</option>
        <option class="option" value="2">2</option>
        <option class="option" value="3">3</option>
    </select>

Selected items:

<ul>
  <li>1</li>
  <li>3</li>
</ul>

</body>
</html>

Затем добавьте JS: 

// Get the select input
document.getElementByID("select")

// Get the options
document.getElementByClassName("option")

// Get the options that are selected
var print = `.option:[active]`;

// Print (paste) the selected options elsewhere on the page
if print {
document.write(print);
}

Скажите, пожалуйста, работает ли это, а может и нет. В конце концов, мне всего 8 лет, и я только начинаю изучать веб-разработку.

...