リストボックスの内容追加と削除

質問

質問QNo.172288を参考にプログラムを作成しました。
そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。
Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除（非表示）あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。（重複チェックみたいな感じです）
それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、Bのリストボックスに表示させる
JavaScriotでは難しいいですか。ご教授いただけないでしょうか
宜しくお願いします

<form name=frm method=post action=/beta/index.php>
<td align=right>
<select name=A size=8 multiple>
<option value=""></option>
</select>
</td>
<td align=center>
<input type=button value="← 追加" onClick="addItem();">
<p>
<input type=button value="戻す →" onClick="delItem();">
<td align=left>
<select name=B size=8 multiple>
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
</select>
</td>
function addItem() {
A = document.frm.A;
B = document.frm.B;
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
}
}
}
function delItem() {
B = document.frm.A;
A = document.frm.B;
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
}
}
}

回答No.1

yambejp · ベストアンサー

もっと効率的なかきかたもあるとは思いますが、元ソースをいかすと
こんな感じでしょうか？

<style type="text/css">
.floatdiv{
float:left;
}
.select0{
width:200px;
}
</style>
<script language="javascript">
function addItem(f) {
var A = f.A;
var B = f.B;
var C=new Array();
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
C[C.length] = i;
}
}
for (var i=C.length -1; i>=0; i--) {
B.options[C[i]] = null;
}
}
function delItem(f) {
var B = f.A;
var A = f.B;
var C=new Array();
for (var i=0; i<B.options.length; i++) {
if (B.options[i].selected) {
A[A.options.length] = new Option(B.options[i].text,B.options[i].value);
C[C.length] = i;
}
}
for (var i=C.length -1; i>=0; i--) {
B.options[C[i]]=null;
}
}
</script>
<form name=frm method=post action=/beta/index.php>
<div class="floatdiv">
<select name=A size=8 multiple class="select0">
</select>
</div>
<div class="floatdiv">
<div>
<input type=button value="← 追加" onClick="addItem(this.form);">
</div>
<div>
<input type=button value="戻す →" onClick="delItem(this.form);">
</div>
</div>
<div>
<select name=B size=8 multiple class="select0">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCC</option>
<option>DDDDD</option>
<option>EEEEE</option>
<option>FFFFF</option>
</select>
</div>
</form>

お礼

返事が遅くなり大変申し訳ございません。

無事動作いたしました
本当にありがとうございました