送信ボタンをクリックすると、マルチセレクションのすべてのオプションを選択できますか？

Question

私はこれらの2つのマルチセレクトを選択/選択解除時にうまく動作します。

問題：提出する前にすべてのオプションが選択されていれば問題ありませんが、選択されたオプション（右側）のいずれかがクリックされると、そのオプションだけがフォームとともに提出されます選択されていないものも必要です（右側）。

UPDATE：右側の選択ボックスから、値がdbに挿入される場所が選択されます。右ボックスの値が左ボックスからシフトされた後にクリックされない限り、右ボックスのすべての値がdbに挿入されます。しかし、5つの値の合計から右のボックス内のいずれかの値をクリックすると、残りの値が選択解除され、選択された値のみがdbに挿入されます。

私は解決策を思い付いた：

$('#formultiselect').click(function(){ 
    $('#to option').prop('selected', true); 
}); 

そして、第二複数選択ボックス：

<select multiple id="to" name="topics[]" style="float:left;"> 

</select> 

そして最後に送信ボタン：

<button id="formultiselect" type="submit" class="btn-medium col-sms-6 col-sm-4">UPDATE SETTINGS</button> 

しかし、それはうまくいかない。

私のJQueryコードに問題はありますか？手伝ってください？

Answer 1

私は、機能が実行される前にフォームが送信されている可能性があると考えています。 .preventDefault()を使用してフォームの送信を停止し、すべてのオプションを選択した後、プログラムでフォームを送信してください。

$('#formultiselect').click(function(event){ 
    event.preventDefault(); 
    $('#to option').prop('selected', true); 
    $(this).submit(); 
}); 

Answer 2

まず、何かが選択されているかどうかをテストします。その場合は、他の唯一の選択値は、<select id="to">から選択されたすべての値を取得します：

// Will have no value if no selection 
if ($('#to').val()) { 
    // Get the selected item 
    var selectedValue = $('#to').find(":selected").text() 
    console.log(selectedValue); 
} else { 
    // Do something with every option 
    $("#to option").each(function() { 
     console.log($(this).val()); 
    } 
} 

Answer 3

私は、元の送信ボタンを非表示とするdivそっくりのボタンを作成しました。

JSコード：

$('#formultiselect').click(function(){ // Clickable div id 
    $('#to option').attr('selected', 'selected'); // Targeted Dropdown List 
    $('#form').submit(); // Form Id 
}); 

新しく作成されたdivのボタン

<div id="formultiselect" style="background:#000;color:#fff;float:left;padding:7px 10px;cursor:pointer;">UPDATE PROFILE</div>