Question

我使用Javascript和HTML创建了一个表单，我想要实现的是当用户在填写默认表单字段后点击“添加项目”按钮时，第一个表单字段下面的第二行显示相同的确切内容表单字段显示在第一个。基本上允许用户通过利用第一个中使用的相同表单字段将X数量的项添加到“包”。试着尽可能地解释。目前我提供的代码正在显示带有示例文本的DIV，以便让我的脑袋围绕着我想要发生的事情。我是Javascript的新手，但愿意弄脏我的手。任何帮助，将不胜感激。

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);      
}   
}

Answer 1

您可以将表单字段放在div内，并在其旁边显示空div。点击button后，第一个innerHTML的{{1}}将被复制并追加（因此div运算符）到{第二个+=的{1}}。这应该可以解决您的问题。并且，顺便说一下，对于innerHTML的多个div具有相同的值是不可取的（虽然我没有修复它）。

option

Javascript onclick按钮显示表单字段

1 个答案: