使用下拉列表选择列表和一个存储所选选项的框

Question

我有一个带有选择下拉列表的表单来显示可用选项（这是使用php从数据库填充的）。用户从列表中选择选项，并将选项添加到下面的框中，以便显示所有选定的项目。下面的项目是一个选择多个框，我认为这个引起了麻烦。

看起来像这样

当一个项目被选中并按下+添加按钮时，该项目将从列表中删除并添加到多个选择框中。然后，从框中选择一个项目，然后单击 - 删除按钮，它将返回到选择下拉列表。

提交表单后，我希望框中的所有项目都保存在一个数组中。我发现这样做的唯一方法是在添加到选择多个框时选择项目，使它们看起来突出显示，如果用户单击框内的任何项目，它们将被取消选择而不保存在单击提交按钮后的数组。

这也是一个问题，因为 - 删除按钮允许您将单个选定的选项返回到下拉列表中，按字母顺序放置它，并且在选择多个项目时它将无法工作。

这是我的代码

$("#agregarFamilia").click(function() {
  if ($('#idFamilia').val() > 0) {
    var names = $('#idFamilia').find('option:selected').text();
    var newOption = $('<option></option>').attr("selected", "selected");
    newOption.val(names);
    newOption.html(names);
    $("#nombresFamilia").append(newOption);
    $("#idFamilia option:selected").remove();
  }
});

$("#removerFamilia").click(function() {
  var length = $('#idFamilia').children('option').length;
  var names = $('#nombresFamilia').find('option:selected').text();
  $("#nombresFamilia option:selected").remove();
  $("#idFamilia").append($("<option></option>").val(length + 1).html(names));

  //Returns the removed item to the dropdown list in alphabetical position
  var foption = $('#idFamilia option:first');
  var soptions = $('#idFamilia option:not(:first)').sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
  });
  $('#idFamilia').html(soptions).prepend(foption);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="form-group">
  <div class="col-md-6">
    <select id="idFamilia" name="idFamilia" class="form-control">
      <option value="0">Select</option>
      <option value="1">PCR</option>
      <option value="2">CABLES</option>

    </select>
  </div>

  <div class="col-md-2">
    <a style="display:block;width:145px" id="agregarFamilia" class="btn btn-primary">
      <span class="fa fa-plus"></span> Add
    </a>
  </div>
</div>

<div class="form-group">
  <label for="nombresFamilia" class="col-md-4 control-label"></label>
  <div class="col-md-6">
    <select multiple="multiple" id="nombresFamilia" name="nombresFamilia[]" class="form-control">
    </select>
  </div>

  <div class="col-md-2">
    <a style="display:block;width:145px" id="removerFamilia" class="btn btn-danger">
      <i class="fa fa-minus"></i> Remove selection
    </a>
  </div>
</div>

我想知道是否有比使用多选框更有效的方法来实现它。有人建议使用复选框，但我必须坚持使用此设计。

Answer 1

我会忘记选定的项目是表单元素 - 将它们作为ul，在选择第一个选择列表时动态创建/修改。然后你可以有一个隐藏的输入，当选择完成时 - 你可以遍历所选元素的列表并将它们传递给一个hiddeen输入 - 或其他mx将它们传递给一个输入并传递它们与表单的其余部分。

请注意，每个订单项现在都有一个特定的删除按钮 - 点击它可以删除该项目。因此，按钮上必须有事件委托，因为在选择元素时会将DOM添加到DOM中。

$("#agregarFamilia").click(function() {
  if ($('#idFamilia').val() > 0) {
    var names = $('#idFamilia').find('option:selected').text();
    var newOption = $('<option></option>').attr("selected", "selected");
    newOption.val(names);
    newOption.html(names);
    $("#nombresFamilia").append(newOption);
    $("#idFamilia option:selected").remove();
    $('#selectedList').append('<li>'+names+'<button type="button" class="delete btn btn-danger btn-xs pull-right">Remove</button></li>')
  }
});

$("body").on("click",".delete", function() {
  var name = $(this).parent().text().replace(/Remove/,'');
  $(this).parent().remove();
  $("#idFamilia").append($("<option></option>").val(length + 1).html(name));

  //Returns the removed item to the dropdown list in alphabetical position
  var foption = $('#idFamilia option:first');
  var soptions = $('#idFamilia option:not(:first)').sort(function(a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
  });
  $('#idFamilia').html(soptions).prepend(foption);
});

#selectedList li {margin-bottom:10px}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="form-group">
  <div class="col-md-6">
    <select id="idFamilia" name="idFamilia" class="form-control">
      <option value="0">Select</option>
      <option value="1">PCR</option>
      <option value="2">CABLES</option>

    </select>
  </div>

  <div class="col-md-2">
    <a style="display:block;width:145px" id="agregarFamilia" class="btn btn-primary">
      <span class="fa fa-plus"></span> Add
    </a>
  </div>
</div>

<div>

<ul id="selectedList"></ul>
</div>