How to delete values from selected list 3 by 3 from bottom of the list


I'm new to jQuery & I have a problem with my code. I couldn't remove the selected values from list box.

i.e Firstly, I select any three values from the first three boxes, Then i click "Add Category". So, The selected three values will be in the forth box. Again, I select any three values from the first three boxes and I click "Add Category" button. So, Totally 6 values will be there in fourth box. Now, When i click(first click) "Remove Category" button, The last three values should be deleted from bottom and on next click, again three values should be deleted. Likewise, I want reduce the values 3 by 3 on every click.

var one = $('.select-manage-category').val();
var two = $('.select-manage-category1').val();
var three = $('.select-manage-category2').val();
$('#add-category').click(function() {
  $(
    '.select-manage-category, .select-manage-category1, .select-manage-category2'
  ).each(function() {
    $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
  });
});
$('#remove-category').click(function() {
  $('.select-manage-category, .select-manage-category1, .select-manage-category2').each(function() {
    var the_index = $(this).val() - 1;
    $('#selected-lst-values')
      .find('option:nth-last-of-type(' + the_index + ')')
      .remove();
  });
});
.select-manage-category,
.select-manage-category1,
.select-manage-category2 {
  width: 100px;
  float: left;
  margin-right: 4px;
}

p {
  clear: left;
  text-align: center;
}

#selected-lst-values {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control select-manage-category" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
</select></div>

<div><select class="form-control select-manage-category1" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select></div>
<div><select class="form-control select-manage-category2" size="5">
    <option>1</option>
    <option>2</option>
    <option>1</option>
    <option>2</option>
		</select>
</div>
<p class="text-center color-red">You can add up to 20 categories</p>
</div>
<input id="add-category" name="add" type="button" value="Add Category">
<input id="remove-category" name="add" type="button" value="Remove Category">
<div><select id="selected-lst-values" class="form-group percent-100" size="5">
		</select></div>
<button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
    <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
</button>

Answers 1

  • You can do it like below:-

    $('#remove-category').click(function() {// check change here
       var select = document.getElementById('selected-lst-values');
    
       for(var i=0;i<3;i++){
           select.removeChild(select.lastChild);
       }
    });
    

    Example:-

    var one = $('.select-manage-category').val();
    var two = $('.select-manage-category1').val();
    var three = $('.select-manage-category2').val();
    $('#add-category').click(function() {
      $(
        '.select-manage-category, .select-manage-category1, .select-manage-category2'
      ).each(function() {
        $('#selected-lst-values').append('<option value="' + $(this).val() + '">' + $(this).val() + '</option>');
      });
    });
    $('#remove-category').click(function() {// check change here
      var select = document.getElementById('selected-lst-values');
      
        for(var i=0;i<3;i++){
          select.removeChild(select.lastChild);
        }
    });
    .select-manage-category,
    .select-manage-category1,
    .select-manage-category2 {
      width: 100px;
      float: left;
      margin-right: 4px;
    }
    
    p {
      clear: left;
      text-align: center;
    }
    
    #selected-lst-values {
      width: 100%;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div><select class="form-control select-manage-category" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    </select></div>
    
    <div><select class="form-control select-manage-category1" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    		</select></div>
    <div><select class="form-control select-manage-category2" size="5">
        <option>1</option>
        <option>2</option>
        <option>1</option>
        <option>2</option>
    		</select>
    </div>
    <p class="text-center color-red">You can add up to 20 categories</p>
    </div>
    <input id="add-category" name="add" type="button" value="Add Category">
    <input id="remove-category" name="add" type="button" value="Remove Category">
    <div><select id="selected-lst-values" class="form-group percent-100" size="5">
    		</select></div>
    <button class="btn btn-md btn-radius pi-btn prodetails-btn" type="button"><strong>Save</strong> 
        <span class="glyphicon glyphicon-menu-right right-arrow-head-icon"></span>
    </button>


Related Articles