我是jQuery的新手,我的代码有问题。我无法从列表框中删除选定的值。
即,首先,我从前三个框中选择任意三个值,然后单击“添加类别”。因此,所选的三个值将在第四框中。同样,我从前三个框中选择任意三个值,然后单击“添加类别”按钮。因此,第四个框中总共有6个值。现在,当我单击(第一次单击)“删除类别”按钮时,应从底部删除最后三个值,并在下次单击时再次删除三个值。同样,我希望每次点击将值3减少3。
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>
最佳答案
您可以像下面这样:
$('#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);
}
});
例:-
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>