how i can disable the appending option when it is selected once in javascript

Question

 function populate() { $('#select_items:selected').each(function() { let html = ''; html += '<div>'; html +='<label> Quantity:'+$(this).text()+' </label>'; html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val='+$(this).val()+' />'; html += '</div>' $('#selected-quantity').append(html) }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="POST" style="width:60%;margin-left:200px"> <div class="form-group"> <label>Choose Product:</label> <select name="product_id" class="form-control" class="select" id="select_items" multiple onchange="populate()"> <option disabled selected>-- Select Product --</option> <option value="foo1">foo1</option> <option value="foo2">foo2</option> <option value="foo3">foo3</option> <option value="foo4">foo4</option> <option value="foo5">foo5</option> </select> <div id="selected-quantity"> </div> </div> <form>

i want to disable the selected option when it is already selected.i have tried with the but this didnt work.this is the code where it is appending the dynamically

  function populate() {
 $('#select_items :selected').each(function() {
let html = '';
html += '<div>';
html +='<label> '+$(this).text()+' </label>';
html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val='+$(this).val()+' />';
html += '</div>' 
$('#selected-quantity').append(html)
});
} 

here is the code where i tried to disable the selected option

 $(document).on('click', 'select.select_items', function () {
  $('select[name*="product_id[]"] option').attr('disabled',false);
  $('select[name*="product_id[]"]').each(function(){
    var $this = $(this);
    $('select[name*="product_id[]"]').not($this).find('option').each(function(){
         if($(this).attr('value') == $this.val())
         $(this).attr('disabled',true);
    });
  });
});

the CDN use for this is given below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Try this code.

You are using select_items as class. But it is id.

Added working fiddle link also.

Working fiddle link

var selectedVal = [];

$(document).on('click', '#select_items option:selected', function () {
    $("select option[value='"+$(this).val()+"']").attr('disabled', true); 
});

function populate() {
    $('#select_items :selected').each(function() {
        let html = '';
        html += '<div>';
        html +='<label> '+$(this).text()+' </label>';
        html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val='+$(this).val()+' />';
        html += '</div>' 
        $('#selected-quantity').append(html)
    });
} 

Answer 2

<script>
    function populate() {
$('#select_items :selected').each(function() {
  var seldrop = $("#select_items :selected").val();
  if ($("#selectedbox_" + seldrop).length == 0) {
    let html = '';
    html += '<div id="selectedbox_' + seldrop + '">';
    html += '<label> Quantity:' + $(this).text() + ' </label>';
    html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val=' + $(this).val() + ' />';
    html += '</div>'
    $('#selected-quantity').append(html)
  } else {
    alert("Already Added");
  }
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script>

Check Append Div length exists or not

$("#selectedbox_" + seldrop).length == 0

<form method="POST" style="width:60%;margin-left:200px">
<div class="form-group">
<label>Choose Product:</label>
<select name="product_id" class="form-control" class="select" id="select_items" multiple onchange="populate()">
  <option value="0" disabled selected>-- Select Product --</option>
  <option value="foo1">foo1</option>
  <option value="foo2">foo2</option>
  <option value="foo3">foo3</option>
  <option value="foo4">foo4</option>
  <option value="foo5">foo5</option>
</select>
<div id="selected-quantity">

</div>
</div>
<form>