我已经创建了一个使用Javascript和HTML的表单,我想实现的是当用户在第一个表单字段下方的第二行填写默认表单字段后单击“Add Item”按钮将显示与第一个显示的相同的确切表单字段。基本上允许用户通过利用第一个中使用的相同表单域来将X数量的项目添加到“包”。试图尽可能最好地解释。目前我所提供的代码是显示带有示例文本的DIV,以便让我的头部缠绕我想要发生的事情。我是Javascript新手,但愿意让我的手变脏。任何帮助,将不胜感激。Javascript onclick按钮显示表单字段
Pick a Collection:
<select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
<option class="array" value="">Lets get started..</option>
<option class="array" value="Adirondack">Adirondack</option>
<option class="array" value="Ridgeline">Ridgeline</option>
<option class="array" value="Horizon">Horizon</option>
</select>
Choose an Item:
<select id="slct2" name="slct2">
<option value=""></option>
</select>
Color:
<select id="slct3" name="slct3">
<option value=""></option>
<option value="">1 Solid Color</option>
<option value="">Mix and Match</option>
</select>
Quantity:
<select id="slct4" name="slct4">
<option value=""></option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>
<br/>
<div id="theDiv"></div>
<button id="addItem" onclick="document.getElementById('theDiv').innerHTML='you touched the button'">Add Item</button>
function populate(s1,s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Adirondack") {
var optionArray = ["|","shoreline|Shoreline Adirondack Chair - AD-0100","fanback|Fanback Adirondack Chair - AD-0101","coastal|Coastal Adirondack Chair - AD-0102", "leftWindsail|Left Windsail Adirondack Chair - AD-0103", "rightwindsail|Right Windsail Adirondack Chair - AD-0104", "roayale|Royale Adionrdack Chair - AD-0105", "folding|Folding Adirondack Chair - AD-0106", "kidz|Kidz Adirondack Chair - AD-0107","shoreline|Shoreline Adirondack Rocker - AD-0110", "fanbackrocker|Fanback Adirondack Rocker - AD-0111", "coastal|Coastal Adirondack Rocker - AD-0112" ];
} else if(s1.value == "Ridgeline") {
var optionArray = ["|","rl-0200|Ridgeline High Back Rocker - RL-0200","rl-0201-36|Ridgeline 36 Inch Gliding Bench - RL-0201-36","rl-0201-48|Ridgeline 48 Inch Gliding Bench - RL0201-48","rl-0201-60|Ridgeline 60 Inch Gliding Bench - RL0201-60" ];
} else if(s1.value == "Horizon") {
var optionArray = ["|","hz-0300|Horizon High Back Rocker - HZ-0300","hz-0301-36|Horizon 36 Inch Gliding Bench - HZ-0301-36","rl-0201-48|Horizon 48 Inch Gliding Bench - HZ-0301-48","hz-0301-60|Horizon 60 Inch Gliding Bench - HZ-0301-60" ];
}
for(var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML= pair[1];
s2.options.add(newOption);
}
}
你可以考虑使用jQuery和.clone()方法,http://api.jquery.com/clone/ – Popo
我会考虑这个方法想保持它所有的JavaScript现在,但我将真的看着它 – Luis