【jQuery】複数選択可の選択ボックス
複数選択可能な選択ボックスです。
See the Pen 190702_選択ボックス by nekuta (@nekuta) on CodePen.
ボタンがクリックされたらセレクトボックスで選択されているoptionのvalueとテキストを配列に入れる
ボタンがクリックされた時にそれが$selectboxRemoveBtnか、$selectboxAddBtnかで変数を変更しています。
配列に格納するのは、複数選択された時のためです。
//valとテキストを格納
for (var i = 0; i < removeOrAdd.length; i++) {
selectArray.push([removeOrAdd[i],$selectboxSelectSelectForm.eq(i).text()]);
}選択されたoptionを削除し、反対側のselectにoptionを入れ込む
先ほど格納した配列selectArrayの個数分処理をまわします。
引数のappendとremoveは、変数actionがremove、またはaddで振り分けています。
//選択されたoptionを削除し、反対側のselectにoptionを入れ込む
function selectAppend(append,remove){
//先ほど格納した配列selectArrayの個数分処理をまわす
for (var a = 0; a < selectArray.length; a++) {
createOption = '<option value="' + selectArray[a][0] + '">' + selectArray[a][1] + '</option>'; //optionを作成
$(append).append(createOption);//反対側のselectにoptionを入れ込む
}
$(remove + ' option:selected').remove();//選択されたoptionを削除
}
