通过jQuery将项目从一个列表框移动到另一个列表框

Question

在这里输入图像描述我正在尝试将复选框中的项目从一个列表移动到另一个列表，但实际上第一个列表是选择选项，而jquery中没有选中属性，有人可以帮助实现这一点吗？

 $(document).ready(function() { //Once a field selected / deslected, update UI List $('#GridFields').bind('change', function(option, checked, select) { var selectedval = $('#GridFields option:selected').last().val(); if ($('.sort-selected li[field-id="+selectedval+"').length > 0) { $('.sort-selected').remove(selectedval); } else { $('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).find(':selected').last().val() + '">' + $(this).find(':selected').last().text() + '</li>'); $('.sort-selected').animate({ scrollTop: $(".sort-selected")[0].scrollHeight }, 1000); } enableSort(); }); 

 <div class="form-group"> <select class="form-control input-sm multiselect" id="GridFields" multiple="multiple" name="GridFields" style="display: none;"> <option disabled="disabled" value="Remedy_Short_ID">Request ID</option> <option value="Actuals_Per_Day">Actuals Per Day</option> </select> <div class="btn-group open" style="width: 100%;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Request ID, Summary, Request Category, Product Name, Comp Progress Level" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="true"> <ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 300px;"><li class="multiselect-item filter"><div class="input-group input-group-sm"> --First Five Elements <li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li> --Remaining Elements <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Actuals_Per_Day"> Actuals Per Day</label></a></li> </ul> </div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <div class="form-group"> @Html.Label("Layout Columns", "Layout Columns", new { @class = "form-label" }) @Html.ListBox("GridFields", CommonEntities.getGridFieldsMultiList(), new { @class = "form-control input-sm multiselect"}) </div> </div> <div class="col-md-3"> <div class="panel panel-custom1"> <div class="panel-heading">Display Order (Drag n Drop an Item)</div> <ul class="list-group sort-selected" style="height:276px;overflow-y:auto"> <li class="list-group-item disabled" field-id="">Request ID</li> <li class="list-group-item disabled" field-id="">Summary</li> <li class="list-group-item disabled" field-id="">Request Category</li> <li class="list-group-item disabled" field-id="">Product Name</li> <li class="list-group-item disabled" field-id="">Comp Progress Level</li> </ul> </div> </div> 

Answer 1

根据您的描述，以下方法应该有效：

 $(document).ready(function() { //Once a field selected / deslected, update UI List $('#GridFieldsWrap input[type=checkbox]').bind('change', function() { $('#GridFieldsWrap input[type=checkbox]').each(function() { if ($(this).is(":checked")) { if ( $(".sort-selected li[field-id=" + $(this).val() + "]").length==0) { $('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).val() + '">' + $(this).parent().text() + '</li>'); } } else { $(".sort-selected li[field-id=" + $(this).val() + "]").remove() } }) $('.sort-selected').animate({ scrollTop: $(".sort-selected")[0].scrollHeight }, 1000); }) //enableSort(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <div class="form-group" id="GridFieldsWrap"> <ul id="GridFields"> <li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" value="Request_ID" checked> Request ID</label></a></li> <li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" checked value="Summary"> Summary</label></a></li> <li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" checked value="Request_Category"> Request Category</label></a></li> <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Product_Name"> Product Name</label></a></li> <li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li> </ul> </div> </div> <div class="col-md-3"> <div class="panel panel-custom1"> <ul class="list-group sort-selected" style="height:100px;overflow-y:auto"> <li class="list-group-item disabled" field-id="Request_ID">Request ID</li> <li class="list-group-item disabled" field-id="Summary">Summary</li> <li class="list-group-item disabled" field-id="Request_Category">Request Category</li> </ul> </div> </div> 

Answer 2

在表单级别添加id="GridFieldsWrap"可帮助您选中复选框属性。

如果需要，请在“列表选项”中选中复选框属性，请尝试在id属性上方添加一个级别，然后检查是否出现了复选框属性。