How to generate input fields based on value from a drop down list

[Ivano Carrara，修改在8 年前。]

I'm not expert on HTML/Javascript so I hope someone can help me.

In a JSP form I need to acquire the age of some persons.
I don't know how many persons there are in advance.

So I need to dinamically generate a quantity of input fields where to put the age of persons based on the value of persons selected from a drop down list.

The quantity of persons is determinated by the value selectd from the drop down list.

For example, if the user select the value "3" from the drop down list, in the JSP form I need to dinamically generate 3 input fields to acquire the age of the 3 persons.
If the user select the value "0" from the drop down list, in the JSP form I don't need to generate input fields.
The only thing that I think I have to use is "onChange" on the drop down list.

I'll try to write only plain HTML and Javascript cause I don't want to get in conflit with jQuery or other libraries.
I'm thinking that using only HTML/Javascript I can get good results too.

At the same time I need to obtain my target without to reload the HTML page.

In my previous days I learned to hide/show an HTML input field - below I show you my code:

<aui:select name="opt" label="some opts" id="opts" onchange="showdv(this,'one','two');">
    <aui:option value="one" selected="true">Option one</aui:option>
    <aui:option value="two">Option two</aui:option>
</aui:select>

<div id="codFiscaleField" style="display:none;">
   <aui:input name="codFiscale" value="<%=codFiscale %>" label="ob-codFiscale" helpmessage="ob-help-codFiscale" size="50"></aui:input>
</div>

<aui:script>
        function showdv(obj,id1,id2) {
            txt=obj.options[obj.selectedIndex].text;
            document.getElementById("codFiscaleField").style.display='none';
             
            if (txt.match(id1)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
             
            if (txt.match(id2)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
        }
</aui:script>

In fact when I pick the "Option two" the script shows the input field.

But my final target is different: I need that when the user select the "Option two" (or "Option three" or "Option four" and so on) the HTML shows two Input fields (or three or four Input fields).

The option selected determine the number of Input fields, for example:

User selected "Option three" then the HTML shows three Input fields.
User selected "Option four" then the HTML shows four Input fields.

My final job is: The select determine the number of Persons in the list and I need to get the ages of every Persons.

Thank you for some more help

Ivano C.

[Nate Cavanaugh，修改在7 年前。]

Hi Ivano,
You could probably set the value of the options to being numbers, then using that value, you can decide how many times to clone the input field. So for instance, you could do:

<aui:select name="opt" label="some opts" id="opts" onchange="showdv(this);">
   <aui:option value="1" selected="true">Option one</aui:option>
   <aui:option value="2">Option two</aui:option>
</aui:select>

Then in your showdv function, you could do something like:

<aui:script>
Liferay.provide(
	window,
	'showdv',
	function(select) {
		var A = AUI();

		select = A.one(select);

		var div = A.one('#codFiscaleField');

		var input = div.one('#codFiscale');

		var fieldContainer = A.one('#codFiscaleFieldContainer');

		if (!fieldContainer) {
			fieldContainer = A.Node.create('<div id="codFiscaleFieldContainer"></div>');

			div.placeAfter(fieldContainer);
		}

		var value = A.Lang.toInt(select.val());

		var buffer = [];

		for (var i = 0; i &lt;= value; i++) {
			buffer.push(input.clone().getDOM());
		}

		fieldContainer.empty().append(buffer);
	},
	['aui-base']
);
</aui:script>

That will create a new div after the one containing the input, and it will clone the input the number of times as the selected value.

I'm not sure if this is exactly what you were looking for, but hopefully it will get you on the right track