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

Question

Good afternoon Stackoverflow folks,

I have the following javascript code, and I want to pass the dorpdown option + text filed into one singe string: Example "Mr. John" "Mrs. Johna" The number of members has to be defined before filling out.

Is there a way of doing this with html? (this is one field of an html form) or creating a second function showFields()

I am trying with jQuery but till now I havent succeeded.

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

Code can be tested here

Any tips are welcome!

Answer 1

What you're looking for is reduce how to take a data set and 'reduce' it into one thing.

another thing to look into is template literals to make things cleaner makes constructing strings very easy.

I've also done it so it maps to an array and i'd suggest going down this route.

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>