制作一个按类别选择项目的订单表单，然后将它们放入列表

Question

我正在尝试制作一个按类别选择项目的订单表单，然后将这些项目放入列表中。我似乎无法弄清楚如何将多个项目添加到列表中。这是我第一次在这里问一个问题而且当谈到javascript时我是个菜鸟。我已设法将一个项目添加到列表中，但无法弄清楚如何向其他文本框添加更多项目。这是我的代码：

＆＃13;

＆＃13;

$(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();

＆＃13;

.floatleft {
  float: left;
}

.clearfix {
  clear: both;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用此代码：

＆＃13;

＆＃13;

$(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++;
};

＆＃13;

.floatleft {
  float: left;
}

.clearfix {
  clear: both;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会创建一个包含所有输入的数组，并通过它创建 circle 。

另外，我会在#selectprod组合上添加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>

@Profile

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>