[英]How to move selected items from one dropdown group list (optgroup)to another dropdown group list (optgroup) using jquery?
我有两个下拉分组列表(Optgroup)。 我想使用向右移动,向左移动按钮在这两个html控件之间交换项目。 我可以从左侧下拉列表的分组项目中选择一个或多个项目,然后单击“向右移动”按钮。 在这种情况下,我可以将所选项目移动到右侧下拉列表中。 但是,项目不会像左侧下拉分组列表那样作为分组列表插入。
这是我的html控件。
<select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10">
<option value="">Please select</option>
<optgroup label="Group A">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
<optgroup label="Group B">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</optgroup>
</select>
<button type="button" title="Forward" id="btnRight">Move Right</button>
<button type="button" title="Backward" id="btnLeft">Move Left</button>
<select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10">
</select>
我编写了以下代码,将项目从左侧的下拉列表分组移动到右侧的下拉列表分组。
<script type="text/javascript">
$(document).ready(function () {
defaultListBind = function (e) {
var selectedOpts = $('#FieldstoBeMatchedOn');
alert(selectedOpts);
$('#FieldstoBeMatchedOn').append($(selectedOpts).clone());
$(selectedOpts).remove();
//e.preventDefault();
}
// defaultListBind();
$('#btnRight').click(function (e) {
var selectedOpts = $('#AvailableFields option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#FieldstoBeMatchedOn').append($(selectedOpts).clone());
$(selectedOpts).remove();
defaultSelect();
e.preventDefault();
});
$('#btnLeft').click(function (e) {
var selectedOpts = $('#FieldstoBeMatchedOn option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#AvailableFields').append($(selectedOpts).clone());
$(selectedOpts).remove();
defaultSelect();
e.preventDefault();
});
defaultSelect = function () {
$("#FieldstoBeMatchedOn option").each(function () {
$(this).prop("selected", true);
});
}
});
</script>
如何以分组或类别格式将项目从左下拉列表移至右下拉列表?
非常感谢您在高级方面的帮助。
怎么样呢?当右边没有东西时,您必须找到一种删除组的方法
$(document).ready(function () { $('#btnRight').click(function (e) { var selectedOpts = $('#AvailableFields option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } if(selectedOpts.parent().attr('label') == "Group A"){ $('#FieldstoBeMatchedOn').append($('<optgroup label="Group A">')).append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); } else{ $('#FieldstoBeMatchedOn').append($('<optgroup label="Group B">')).append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); } }); $('#btnLeft').click(function (e) { var selectedOpts = $('#FieldstoBeMatchedOn option:selected'); if (selectedOpts.length == 0) { alert("Nothing to move."); e.preventDefault(); } $('#AvailableFields').append($(selectedOpts).clone()); $(selectedOpts).remove(); defaultSelect(); e.preventDefault(); }); defaultSelect = function () { $("#FieldstoBeMatchedOn option").each(function () { $(this).prop("selected", true); }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select name="AvailableFields" id="AvailableFields" multiple="multiple" size="10"> <option value="">Please select</option> <optgroup label="Group A"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </optgroup> <optgroup label="Group B"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </optgroup> </select> <button type="button" title="Forward" id="btnRight">Move Right</button> <button type="button" title="Backward" id="btnLeft">Move Left</button> <select name="FieldstoBeMatchedOn" id="FieldstoBeMatchedOn" multiple="multiple" size="10"> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.