Как напечатать выбранные параметры выпадающего списка плюс текстовое поле при использовании только js?

Question

Добрый день, ребята из Stackoverflow,

У меня есть следующий код javascript, и я хочу передать опцию dorpdown + текст в одну строку: пример "Мистер Джон" "Миссис Джона" Количество членов должно быть определено до заполнения.

Есть ли способ сделать это с помощью HTML? (это одно поле HTML-формы) или создание второй функции showFields ()

Я пытаюсь с jQuery, но до сих пор мне не удалось.

function addFields() {
    var number = document.getElementById('member').value;
    var container = document.getElementById('container');
    var optionsSelect = [
        {
            id: 1,
            title: 'Mr'
        },
        {
            id: 2,
            title: 'Mrs'
        }
    ];
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for (let i = 0; i < number; i++) {
        var select = document.createElement('select');
        for (var j = 0; j < optionsSelect.length; j++) {
            var options = document.createElement('option');
            options.value = optionsSelect[j].id;
            options.text = optionsSelect[j].title;
            select.appendChild(options);
        }
        container.appendChild(select);
        container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
        var input = document.createElement('input');
        input.type = 'text';
        container.appendChild(input);
        container.appendChild(document.createElement('br'));
    }
}

      <input type="text" id="member" name="member" value="">Number of  members: (max. 10)<br />
      <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
      <div id="container"/>

Код можно проверить здесь

Любые советы приветствуются!

Answer 1

То, что вам нужно, - это уменьшить, как взять набор данных и «свести» его к одной вещи.

Еще одна вещь, на которую стоит обратить внимание, это литералы шаблонов, чтобы сделать вещи более понятными, что облегчает создание строк.

Я также сделал это, чтобы он отображался в массив, и я бы предложил пойти по этому маршруту.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const optionsSelect = [{
    id: 1,
    title: 'Mr'
  },
  {
    id: 2,
    title: 'Mrs'
  }
];

function getResults() {
  const { selects, inputs } = getInputs();

  return selects.reduce((acc, select, i) => {
    const { title, name } = getValuesFromElements(select, inputs[i]);
    
    return (title && name) ? `${acc} ${title}. ${name}` : acc;
  }, '');
}

function getResultsAsArray() {
  const { selects, inputs } = getInputs();
  
  const getFieldValues = (select, i) => {
    const { title, name } = getValuesFromElements(select, inputs[i]);
    
    return (title && name) ? `${title}. ${name}` : '';
  };

  return selects.map(getFieldValues).filter(Boolean);
}

function getValuesFromElements(select, {value: name}) {
  const { title } = optionsSelect[select.value - 1];

  return {title, name};
}

function getContainerElements(query) {
  return Array.from(document.querySelectorAll(`#container > ${query}`));
}

function getInputs() {
  const selects = getContainerElements('select');
  const inputs = getContainerElements('input');

  return {
    selects,
    inputs
  }
}


function addFields() {
  const { value: number } = document.getElementById('member');
  const container = document.getElementById('container');

  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }

  for (let i = 0; i < number; i++) {
    const select = document.createElement('select');
    for (let j = 0; j < optionsSelect.length; j++) {
      const options = document.createElement('option');
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
    const input = document.createElement('input');
    input.type = 'text';
    container.appendChild(input);
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<a href="#" onclick="console.log(getResults())">Log results</a>
<a href="#" onclick="console.log(getResultsAsArray())">Log results as array</a>
<div id="container"></div>