如何从列表底部删除选定列表3中的值3

Question

我是jQuery＆amp;的新手。我的代码有问题。我无法从列表框中删除所选的值。

首先，我从前三个框中选择任意三个值，然后点击＆＃34;添加类别＆＃34;。因此，所选的三个值将位于第四个框中。再次，我从前三个框中选择任意三个值，然后单击＆＃34;添加类别＆＃34;按钮。因此，第四个框中将有6个值。现在，当我点击（第一次点击）＆＃34;删除类别＆＃34;按钮，应从底部和下一次单击删除最后三个值，同样应删除三个值。同样，我希望每次点击都减少3乘3的值。

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

看到这一点。

刚刚添加了for循环。

此外，我不明白您在代码中使用.find('option:nth-last-of-type(' + the_index + ')')的原因。这不起作用，因为the_index实际上不是索引值，而是字段中的值。

相反，我使用了.children().last()

＆＃13;

＆＃13;

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() {
    //console.log($('#selected-lst-values').children());
    var the_index = $('#selected-lst-values').length - 1;
    for(var i=0; i<=3 && the_index>=0; i++,the_index--){
      $('#selected-lst-values').children().last()
      .remove();
    }
  });
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做： -

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

实施例： -

＆＃13;

＆＃13;

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);
    }
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;