ドロップダウン選択リストと選択したオプション

Question

私は（これはPHPを使用してデータベースから充填ます）利用可能なオプションを表示するように選択ドロップダウンを使用してフォームを持っているを格納するためのボックスを使用します。ユーザーがリストからオプションを選択すると、オプションが下のボックスに追加され、選択したすべてのアイテムが表示されます。下の項目は選択した複数のボックスで、これは面倒を引き起こすと思います。

それは、項目が選択を取得すると、この

のように見え、+追加ボタンを押して、項目をリストから削除し、複数選択ボックスに追加されます。次に、1つのアイテムがボックスから選択されてから[削除]ボタンをクリックすると、選択ドロップダウンに戻ります。

フォームを送信した後、私は、ボックス内のすべての項目を配列に保存したいです。私が見つけた唯一の方法は、選択した複数のボックスにアイテムを選択して強調表示させ、ボックス内のアイテムをクリックすると選択解除され、配列を作成します。削除ボタンあなたが戻ってドロップダウンリストに、単一の選択されたオプションを返し、それがアルファベット順に配置され、選択した複数のアイテムを持ちながら、それは動作しません場所を選択することができます - ので

また、これは問題です。ここで

は、私は、複数の選択ボックスを使用するよりも、これを実装するためのより効率的な方法があります場合、私は思ったんだけど

$("#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としてそれらを持っています。次に、隠れた入力を持つことができます。選択が完了すると、選択した要素のリストを繰り返し処理して、隠れた入力や他のmxに渡して入力に転送し、残りのフォームと一緒に渡すことができます。そしてそれをクリックすると、その項目のdelteionすることができます - 各ラインアイテムは、現在、特定の削除ボタンがあり

注意。要素の選択時に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>