[英]How could to manage two same select2, hide and show selected item from another select2
根据这个问题,我可以将所选项目添加到另一个 select。
考虑我们有两个 select2,具有相同的选项。 当我从 box1 中 select 项目时,应该从 box2 中删除相同的项目并且用户不能 select 它。 我在jsfiddle.net上提供它。
现在我想取消选择它,box2 应该再次拥有该项目。
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
$("#Box1").select2();
$("#Box2").select2();
$("#Box1").on("change", function() {
$.each($('#Box1').select2('data'), function(i, item) {
$('#Box2 option[value="'+item.id+'"]').remove();
});
});
试试这个,它可能会有所帮助:
$("#Box1").select2(); $("#Box2").select2(); $("#Box1").on("change", function(e) { $("#Box2").html(""); $('#Box1 option').each(function() { if($("#Box1").val()) { if($("#Box1").val().some(e=>{return e == $(this).val()})) { $('#Box2 option[value="'+$(this).val()+'"]').remove(); } else if(.$("#Box2 option").toArray().some(e=>{return e.value == $(this).val()})) { $("#Box2"),append($('<option>': {value. $(this),val(): text. $(this);text()})). } } else { $("#Box2").html($("#Box1");html()); } }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/> <select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select> <select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="D">D</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.