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

各位下午好

我有以下javascript代码，我想将dorpdown选项+文本字段传递到一个字符串中： 实例 约翰先生 乔娜太太 在填写之前，必须定义成员数量

有没有一种方法可以用html实现这一点？这是html表单的一个字段 或创建第二个函数显示字段

我正在尝试使用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"/>

代码可以测试

---

欢迎任何提示

您需要的是简化如何获取数据集并将其“简化”为一件事

另一件需要研究的事情是模板文本，它使事情变得更干净，从而使构造字符串变得非常容易

我也这样做了，所以它映射到一个数组，我建议沿着这条路线走

常量选项选择=[{ id:1， 标题：“先生” }, { id:2， 标题：“夫人” } ]; 函数getResults{ const{selects，inputs}=getInputs； return selects.reduceac，select，i=>{ const{title，name}=getValuesFromElementsselect，输入[i]； 返回title&&name？`${acc}${title}。${name}`:acc； }, ; } 函数getResultsSarray{ const{selects，inputs}=getInputs； const getFieldValues=select，i=>{ const{title，name}=getValuesFromElementsselect，输入[i]； 返回title&&name？`${title}.${name}`:； }; 返回selects.mapgetFieldValues.filterBoolean； } 函数getValuesFromElementsselect，{value:name}{ const{title}=options选择[select.value-1]； 返回{title，name}； } 函数getContainerElementsquery{ 返回数组.fromdocument.querySelectorAll`container>${query}`； } 函数getInputs{ const selects=getContainerElements'select'； 常量输入=getContainerElements'input'； 返回{ 选择， 投入 } } 函数addFields{ const{value:number}=document.getElementById'member'； const container=document.getElementById'container'； 而container.hasChildNodes{ container.removeChildcontainer.lastChild； } 对于设i=0；iName'+i+1； const input=document.createElement'input'； input.type='text'； container.appendChildinput； container.appendChilddocument.createElement'br'； } } 成员人数：最多10人

---

你能清理一下你的代码吗？这很难解析。很抱歉，谢谢你的更正。你能解释一下你的意思吗？不清楚，所以当你填好后，你只需要一个结果字符串吗？嗨，乔，是的，我想在填好后，将两个字段的行[选择][文本]作为字符串提交，例如John先生。我们的想法是在DB中的一个单列文本字段中提交所有字段。我的意思是我可以向您演示如何执行此操作，但是如果您要保存到DB，为什么不另存为单独的条目？是的，这正是我的意思！魅力的解决方案，一个非常干净的代码。感谢您的时间和解释。嗨，Joe，也许您可以在以下方面提供帮助：在getResults函数中，我添加了msgs=title&&name${acc}${title}${name}：acc；document.getElementByIdoutput.innerHTML=msgs；现在我使用php作为后端，希望将结果传递给一个php变量。这是什么意思$容器=没关系！我在代码中发现了错误。一切正常，我的下一个问题是：