Is it possible to append the item quantity on Select Option at Javascript?

Question

Here is my Select Option:-

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

I want to append the quantity of the item, if the same item added. For the example:

If I add 1 more carrot, the option should be change from:-

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

Can I use javascript for this? if not, how I can do it?

For the first question, yes you can do that, the second is to broad without showing what you have tried so far — Icepickle, Feb 19 '17 at 15:35

score 1 · Answer 1 · answered Feb 19 '17 at 15:56

You could use replace on the textContent of the selected option element, using a regular expression to extract the number part, and then use the callback function of the replace to inject the updated number.

Here is a demo:

function adjustCount(diff) {
    var sel = document.getElementById('listboxstock');
    if (sel.selectedIndex < 0) return; // nothing selected
    var opt = sel.options[sel.selectedIndex];
    opt.textContent = opt.textContent.replace(/\d+/, function (m) {
        return Math.max(0, +m + diff); // adjust, but not below 0
    });
}

document.getElementById('inc').addEventListener('click', adjustCount.bind(null, 1));
document.getElementById('dec').addEventListener('click', adjustCount.bind(null, -1));

<select id="listboxstock" size="5" class="form-control">
    <option>Carrot - 3</option>
    <option>Cucumber - 2</option>
</select>
<br>
<button id="inc">Add</button>
<button id="dec">Remove</button>

score 1 · Accepted Answer · answered Feb 19 '17 at 16:10

Here you are

$("#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>

that was exactly what i want... thanks so much dude :) – Austin Sebastian Marviano Feb 20 '17 at 03:53 — Austin Sebastian Marviano, Feb 20 '17 at 03:53

score 0 · Answer 3 · answered Feb 19 '17 at 15:40

So you can use a multitude of built-in functions to do that. Personally I would use split and parseInt creating the following code:

<html>
<body>
<select size="5">
<option onclick="myFucntion()" id="item">Carrot - 3</option>
<option>Cucumber - 2</option>
</select>
<script>
function myFucntion(){
    var str=document.getElementById("item").innerHTML;
    str=str.split(" ");
    res=parseInt(str[2]);
    res++;
    document.getElementById("item").innerHTML="Carrot - "+res;
}
</script>
</body>
</html>

I'm not sure I understood what you wanted to do but i believe you wanted this.

Is it possible to append the item quantity on Select Option at Javascript?

3 Answers3