我是 JQuery 的新手。我已经编写了用于从选定列表框中添加和删除代码的代码。在这里,从不同的选择列表框中添加前三个值已经完成,但是我无法删除我添加的这三个值。 HTML:
<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>
CSS:
.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%;
}
JQuery:
$(document).ready(function () {
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($(this).val());
$('#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 () {
$('#selected-lst-values')
.find('option[value="' + $(this).val() + '"')
.remove();
});
});
});
最佳答案
你太了!如果您检查控制台日志,您会看到 .find()
找不到目标,因为您错过了右方括号。
你只需要:
.find('option[value="' + $(this).val() + '"]')
$(document).ready(function() {
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($(this).val());
$('#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() {
$('#selected-lst-values')
.find('option[value="' + $(this).val() + '"]')
.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>
</select>
</div>
<div>
<select class="form-control select-manage-category1" size="5">
<option>1</option>
<option>2</option>
</select>
</div>
<div>
<select class="form-control select-manage-category2" size="5">
<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>
我还创建了一个更新的工作 Fiddle here .
希望这有帮助:)
编辑:
要删除最后三个值,然后能够删除前 三个值直到所有值都消失,您需要使用 CSS 选择器 last-of-type
:
var the_index = $(this).val() - 1;
$('#selected-lst-values').find('option:nth-last-of-type(' + the_index + ')').remove();
$(document).ready(function() {
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>
</select></div>
<div><select class="form-control select-manage-category1" size="5">
<option>1</option>
<option>2</option>
</select></div>
<div><select class="form-control select-manage-category2" size="5">
<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>
这基于删除 <select>
中的最后三个选项。单击按钮列出,并且一次添加三个,最后三个选项将是您刚刚添加的选项。
我已经更新了我的 fiddle 来展示这个 here .
请注意,如果您愿意,也可以使用 .find('option').remove();
一次删除所有 类别.
希望这有帮助:)
关于jquery - 如何在单击按钮时从选定列表框中删除多个选定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42704106/