如何在单击时从html选择列表框中删除值

Question

我是Jquery的新手。我无法删除3乘3和3的值。如果我点击＆＃34;删除类别＆＃34;按钮，选择1,1,1。它不会删除，在某些情况下，它会被1或2删除1.我无法理解发生了什么。我想要的是，我要选择的每三个值应该从每个按钮（删除类别）点击的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

感谢您的解释..请参阅更新的js小提琴

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(){
var length=$('#selected-lst-values option').length; //total no of items in the fourth box
//remove the last three on each click
for( var i=0; i<3 ;i++)
{
 $('#selected-lst-values option:eq(' + (length - 1) + ')').remove();
length --;
}
});

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

Updated fiddle

Answer 2

希望这个js对你有用。 用此

替换删除功能

＆＃13;

＆＃13;

$('#remove-category').click(function(){
  var index= $('.select-manage-category')[0].selectedIndex || $('.select-manage-category1')[0].selectedIndex || $('.select-manage-category2')[0].selectedIndex;
  $('.select-manage-category option:eq(' + index + ')').remove();
  $('.select-manage-category1 option:eq(' + index + ')').remove();
  $('.select-manage-category2 option:eq(' + 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>
<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;

Updated fiddle