質問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ベストアンサー
- 回答日時:
もっと効率的なかきかたもあるとは思いますが、元ソースをいかすと
こんな感じでしょうか?
<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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
フォームが空欄の時にフォーム...
-
GASに文字列として関数を入れる...
-
特定の文字列を複数抜き出した...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
①入力フォーム→②確認表示画面→③...
-
Q&A掲示板の入力フォームに文字...
-
ボタンを押したあとに画像を表...
-
コードレビューをお願いします。
-
React hooksが値を返して配列変...
-
フロントエンドフレームワーク...
-
画面遷移を行わずに同一ページ...
-
ローディングアニメーションの...
-
jQueryで同じクラス名のものを...
-
ジャバスクリプトについて。
-
プログラムについて。
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
iOSのみダブルタップが必要
-
ジャバスクリプトについて。
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
指定時間になったら、WEBサイト...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
スマホ上で、左右スワイプで次...
-
読み込んだQRコードをフォーム...
-
フロントエンドフレームワーク...
-
React hooksが値を返して配列変...
-
GASでGoogleフォームの自動返信...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
HTMLで作った時報アプリが動き...
-
jQueryで同じクラス名のものを...
おすすめ情報