制作一個按類別選擇項目的訂單，然后將其放入列表

Question

我試圖制作一個按類別選擇商品的訂單，然后將其放入列表中。 我似乎無法弄清楚如何將多個項目添加到列表中。 這是我第一次在這里問一個問題，而對於JavaScript來說，我是個菜鳥。 我設法將一個項目添加到列表中，但無法弄清楚如何向其他文本框添加更多項目。 這是我的代碼：

 $(document).ready(function() { var allOptions = $('#selectprod option') $('#selectcat').change(function() { $('#selectprod option').remove() var classN = $('#selectcat option:selected').prop('class'); var opts = allOptions.filter('.' + classN); $.each(opts, function(i, j) { $(j).appendTo('#selectprod'); }); }); }); var select = document.getElementById('selectprod'), input = document.getElementById('textbox'); select.onchange = function() { input.value = this.value; }; select.onchange(); 

 .floatleft { float: left; } .clearfix { clear: both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="prodselectbox"> <div class="floatleft cat">Category &nbsp;</div> <div class="floatleft catid"> <select id="selectcat" name="categoryselected"> <option value="" class="piths">Select Category</option> <option class="fruit" value="Fruit" id="selectionone">Fruit</option> <option class="veggies" value="Vegetables" id="selectiontwo">Vegetables</option> <option class="meat" value="Meat" id="selectionthree">Meat</option> </select> </div> <div class="floatleft artid" style="margin-left:20px;">Product &nbsp; </div> <div class="floatleft selectarticle"> <select id="selectprod" name="articleID"> <option value="" class="piths">Select Product</option> <option value="Apples" class="selectors edibles">Apples</option> <option value="Oranges" class="selectors fruit">Oranges</option> <option value="Grapes" class="selectors fruit">Grapes</option> <option value="Strawberries" class="selectors fruit">Strawberries</option> <option value="Pears" class="selectors fruit">Pears</option> <option value="Blackberries" class="selectors fruit">Blackberries</option> <option value="Peaches" class="selectors fruit">Peaches</option> <option value="Spinach" class="selectors veggies">Spinach</option> <option value="Potatoes" class="selectors veggies">Potatoes</option> <option value="Kale" class="selectors veggies">Kale</option> <option value="Carrots" class="selectors veggies">Carrots</option> <option value="Acorn-squash" class="selectors veggies">Acorn Squash</option> <option value="Chicken" class="selectors meat">Chicken</option> <option value="Beef" class="selectors meat">Beef</option> <option value="Pork" class="selectors meat">Pork</option> <option value="Fish" class="selectors meat">Fish</option> </select> </div> <div class="clearfix"></div> </div> <div style="margin-top:50px;"> <p>Item 1:Add this to my list: <input type="text" id="textbox" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox2" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox3" /></p> </div> 

Answer 1

您可以使用以下代碼：

 $(document).ready(function() { var allOptions = $('#selectprod option') $('#selectcat').change(function() { $('#selectprod option').remove() var classN = $('#selectcat option:selected').prop('class'); var opts = allOptions.filter('.' + classN); $.each(opts, function(i, j) { $(j).appendTo('#selectprod'); }); }); }); var select = document.getElementById('selectprod'), count = 1; select.onchange = function() { input = document.getElementById('textbox'+ count); input.value = this.value; count++; }; 

 .floatleft { float: left; } .clearfix { clear: both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="prodselectbox"> <div class="floatleft cat">Category &nbsp;</div> <div class="floatleft catid"> <select id="selectcat" name="categoryselected"> <option value="" class="piths">Select Category</option> <option class="fruit" value="Fruit" id="selectionone">Fruit</option> <option class="veggies" value="Vegetables" id="selectiontwo">Vegetables</option> <option class="meat" value="Meat" id="selectionthree">Meat</option> </select> </div> <div class="floatleft artid" style="margin-left:20px;">Product &nbsp; </div> <div class="floatleft selectarticle"> <select id="selectprod" name="articleID"> <option value="" class="piths">Select Product</option> <option value="Apples" class="selectors edibles">Apples</option> <option value="Oranges" class="selectors fruit">Oranges</option> <option value="Grapes" class="selectors fruit">Grapes</option> <option value="Strawberries" class="selectors fruit">Strawberries</option> <option value="Pears" class="selectors fruit">Pears</option> <option value="Blackberries" class="selectors fruit">Blackberries</option> <option value="Peaches" class="selectors fruit">Peaches</option> <option value="Spinach" class="selectors veggies">Spinach</option> <option value="Potatoes" class="selectors veggies">Potatoes</option> <option value="Kale" class="selectors veggies">Kale</option> <option value="Carrots" class="selectors veggies">Carrots</option> <option value="Acorn-squash" class="selectors veggies">Acorn Squash</option> <option value="Chicken" class="selectors meat">Chicken</option> <option value="Beef" class="selectors meat">Beef</option> <option value="Pork" class="selectors meat">Pork</option> <option value="Fish" class="selectors meat">Fish</option> </select> </div> <div class="clearfix"></div> </div> <div style="margin-top:50px;"> <p>Item 1:Add this to my list: <input type="text" id="textbox1" class="selected_item" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox2" class="selected_item" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox3" class="selected_item" /></p> </div> 

Answer 2

我將創建一個包含所有輸入的數組，並在其中循環 。

另外，我將在#selectprod組合背面添加“ Select Product選項，並使其默認為選中狀態。

最后，當用戶Select Product時，我將自動重新選擇“ Select Product ，這樣他們就可以再次選擇相同的產品（這可以通過下面的reset combo[2]行實現-當然可以刪除） 。

演示：

 $(document).ready(function() { var allOptions = $('#selectprod option') $('#selectcat').change(function() { $('#selectprod option').remove() var classN = $('#selectcat option:selected').prop('class'); var opts = allOptions.filter('.' + classN); allOptions.filter('.piths').appendTo('#selectprod'); // add 'Select Product' $.each(opts, function(i, j) { $(j).appendTo('#selectprod'); }); $('#selectprod').find('.piths').prop('selected', true); // reset combo }); }); var select = document.getElementById('selectprod'); inputs = $('#textbox').add('#textbox2').add('#textbox3'), // create array of inputs currentInput = 0; // index to keep track select.onchange = function() { inputs[currentInput].value = this.value; // set value of curernt currentInput = (currentInput + 1) % inputs.length; // increment index (circle) $('#selectprod').find('.piths').prop('selected', true); // reset combo[2] }; 

 .floatleft { float: left; } .clearfix { clear: both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="prodselectbox"> <div class="floatleft cat">Category &nbsp;</div> <div class="floatleft catid"> <select id="selectcat" name="categoryselected"> <option value="" class="piths">Select Category</option> <option class="fruit" value="Fruit" id="selectionone">Fruit</option> <option class="veggies" value="Vegetables" id="selectiontwo">Vegetables</option> <option class="meat" value="Meat" id="selectionthree">Meat</option> </select> </div> <div class="floatleft artid" style="margin-left:20px;">Product &nbsp; </div> <div class="floatleft selectarticle"> <select id="selectprod" name="articleID"> <option value="" class="piths">Select Product</option> <option value="Apples" class="selectors edibles">Apples</option> <option value="Oranges" class="selectors fruit">Oranges</option> <option value="Grapes" class="selectors fruit">Grapes</option> <option value="Strawberries" class="selectors fruit">Strawberries</option> <option value="Pears" class="selectors fruit">Pears</option> <option value="Blackberries" class="selectors fruit">Blackberries</option> <option value="Peaches" class="selectors fruit">Peaches</option> <option value="Spinach" class="selectors veggies">Spinach</option> <option value="Potatoes" class="selectors veggies">Potatoes</option> <option value="Kale" class="selectors veggies">Kale</option> <option value="Carrots" class="selectors veggies">Carrots</option> <option value="Acorn-squash" class="selectors veggies">Acorn Squash</option> <option value="Chicken" class="selectors meat">Chicken</option> <option value="Beef" class="selectors meat">Beef</option> <option value="Pork" class="selectors meat">Pork</option> <option value="Fish" class="selectors meat">Fish</option> </select> </div> <div class="clearfix"></div> </div> <div style="margin-top:50px;"> <p>Item 1:Add this to my list: <input type="text" id="textbox" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox2" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox3" /></p> </div> 

Answer 3

查找value == ""的輸入，並將其值更改為您選擇的值

無需計數器，因此您可以清除一個輸入並再次選擇所需的任何內容

 $(document).ready(function() { var allOptions = $('#selectprod option') $('#selectcat').change(function() { $('#selectprod option').remove() var classN = $('#selectcat option:selected').prop('class'); var opts = allOptions.filter('.' + classN); $.each(opts, function(i, j) { $(j).appendTo('#selectprod'); }); }); }); var select = document.getElementById('selectprod'); select.onchange = function() { var input = $('input[id^="textbox"]').get().find(x=>$(x).val() == ""); if(input){ $(input).val(this.value); } }; select.onchange(); 

 .floatleft { float: left; } .clearfix { clear: both; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="prodselectbox"> <div class="floatleft cat">Category &nbsp;</div> <div class="floatleft catid"> <select id="selectcat" name="categoryselected"> <option value="" class="piths">Select Category</option> <option class="fruit" value="Fruit" id="selectionone">Fruit</option> <option class="veggies" value="Vegetables" id="selectiontwo">Vegetables</option> <option class="meat" value="Meat" id="selectionthree">Meat</option> </select> </div> <div class="floatleft artid" style="margin-left:20px;">Product &nbsp; </div> <div class="floatleft selectarticle"> <select id="selectprod" name="articleID"> <option value="" class="piths">Select Product</option> <option value="Apples" class="selectors edibles">Apples</option> <option value="Oranges" class="selectors fruit">Oranges</option> <option value="Grapes" class="selectors fruit">Grapes</option> <option value="Strawberries" class="selectors fruit">Strawberries</option> <option value="Pears" class="selectors fruit">Pears</option> <option value="Blackberries" class="selectors fruit">Blackberries</option> <option value="Peaches" class="selectors fruit">Peaches</option> <option value="Spinach" class="selectors veggies">Spinach</option> <option value="Potatoes" class="selectors veggies">Potatoes</option> <option value="Kale" class="selectors veggies">Kale</option> <option value="Carrots" class="selectors veggies">Carrots</option> <option value="Acorn-squash" class="selectors veggies">Acorn Squash</option> <option value="Chicken" class="selectors meat">Chicken</option> <option value="Beef" class="selectors meat">Beef</option> <option value="Pork" class="selectors meat">Pork</option> <option value="Fish" class="selectors meat">Fish</option> </select> </div> <div class="clearfix"></div> </div> <div style="margin-top:50px;"> <p>Item 1:Add this to my list: <input type="text" id="textbox" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox2" /></p> </div> <div style="margin-top:20px;"> <p>Item 2:Add this to my list: <input type="text" id="textbox3" /></p> </div>