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"/>

可以测试代码here

欢迎任何提示！

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>

仅使用js时如何打印选定的下拉列表选项以及文本字段？

1 个答案: