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

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>