Javascript onclick按鈕顯示錶單字段

我已經創建了一個使用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);  
} 
}

來源

2014-02-18 Luis

你可以考慮使用jQuery和.clone（）方法，http://api.jquery.com/clone/ – Popo

我會考慮這個方法想保持它所有的JavaScript現在，但我將真的看着它 – Luis

你可以把你的表單域div內有一個空div旁邊。在點擊button時，第一個div的innerHTML將被複制，並且附加（因此+=運營商）到第二個div的innerHTML。這應該可以解決你的問題。順便說一下，不希望select的多個option具有相同的值（我還沒有修復它）。

<html> 
<head> 
<script type="text/javascript"> 
function add_item(){ 
document.getElementById("div2").innerHTML += document.getElementById("div1").innerHTML; 
} 
function populate(slct){ 
var sels = document.getElementsByTagName("select"); 
var len = sels.length; 
var val = slct.options[slct.selectedIndex].value; 
var optionArray, pair, newOption; 
    for(var i = 0; i < len; i++){ 
     if(slct == sels[i]){ 
     sels[i+1].options.length = 0; 
      if(val == "Adirondack"){ 
      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(val == "Ridgeline"){ 
      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(val == "Horizon"){ 
      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) { 
      pair = optionArray[option].split("|"); 
      newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML= pair[1]; 
      sels[i+1].options.add(newOption);  
      } 
     } 
    } 
} 
</script> 
</head> 
<body onload="add_item();"> 
<div id="div1" style="display:none;"> 
Pick a Collection: 
<select name="slct1[]" onchange="populate(this);"> 
    <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 name="slct2[]"> 
    <option value=""></option> 
</select> 
Color: 
<select name="slct3[]"> 
    <option value=""></option> 
    <option value="">1 Solid Color</option> 
    <option value="">Mix and Match</option> 
</select> 
Quantity: 
<select 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> 
<div id="div2"></div> 
<button type="button" onclick="add_item();">Add Item</button> 
</body> 
</html>

來源

2014-02-18 01:37:19

嘿，這對我的工作感謝，但現在我的動態下拉代表相當奇怪。我已經重新編輯了我原來的帖子，併爲第一個選擇項目上的填充函數提供了Javascript。您應該試試我的表單，然後添加項目以瞭解其受到的影響。我試圖把它轉儲到JSfiddle，但它不是正確呈現我的JavaScript，我認爲這是我的數組。任何建議肯定會受到讚賞或任何鏈接/主題預先感謝。 – Luis

查看我的更新回答。 –

嘿杜達對不起回合遲到的迴應我能夠添加行，但我的項目不保存每個下拉列表的值。該死的，我不得不參加一些教程。你似乎有一個很好的抓地力，你推薦任何教程材料？ – Luis

Javascript onclick按鈕顯示錶單字段

回答

相關問題