javascript - 使用下拉选择列表和一个框来存储选定的选项

我有一个带有选择下拉菜单的表格，以显示可用选项（使用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>

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

最佳答案

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

请注意，每个订单项现在都有一个特定的删除按钮-单击该按钮可以删除该项目。并且因此必须在按钮上进行事件委托，因为在选择元素时将其添加到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>