javascript - 是否可以在 Javascript 的选择选项上附加商品数量？

Question

这是我的选择选项:-

<select id="listboxstock" size="5" class="form-control">
    <option>Carrot - 3</option>
    <option>Cucumber - 2</option>
</select>

如果添加了相同的商品，我想附加商品的数量。 举个例子:

如果我再添加 1 个胡萝卜，选项应更改为:-

<option>Carrot - 3</option> to be <option>Carrot - 4</option>

我可以为此使用 JavaScript 吗？如果没有，我该怎么做？

Answer 1

你在这里

$("#addOption").on("click", function(e){
    var newOption = $("#optionText").val();
    var options = {};
    var index = 0;
    $("#listboxstock option").each(function() {
      debugger;
      var valueComponents = $(this).val().split(" - ");
      if (valueComponents[0] == newOption) {
        var number = parseInt(valueComponents[1]);
        number++;
        $(this).val(valueComponents[0] + " - " + number);
      }
      options["option" + index] = $(this).val();
      index++;
    });
    var $el = $("#listboxstock");
    $el.find('option')
      .remove()
      .end();
    //console.log($el);
    $.each(options, function(key,value) {
      $el.append($("<option>" + value + "</option>"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="listboxstock" size="5" class="form-control">
    <option>Carrot - 3</option>
    <option>Cucumber - 2</option>
</select>
<input type="text" placeholder="Type the name of the item to add" id="optionText" />
<button id="addOption">Add Option</button>