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

时间:2017-12-06 08:54:06

标签: javascript jquery asp.net-mvc listbox

enter image description here我试图通过复选框检查将项目从一个列表移动到另一个列表,但实际上第一个列表是选择选项,并且检查的属性不是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();
  });
&#13;
<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>
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

根据您的描述,以下内容应该有效:

$(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>

答案 1 :(得分:0)

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

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