テクストボックスからセレクトボックスへ

質問

１．テキストボックスにテキストを入力
２．追加ボタンを押す
３．セレクトボックスに表示
４．セレクトボックスに追加した項目を選択し削除ボタンで削除できる

以下のようなプログラムを教えていただけますでしょうか？

回答No.2

yambejp · ベストアンサー

selectのデータには表示用のtextと送信用のvalueがあるのは
ご存知だと思います。
これを同じにしていいなら、以下のようにかけます。
別々にしたいならもう一個textフィールドを増やして対応してください。

<script language="javascript">
function addOption(f){
addText=f.txt.value;
addValue=f.txt.value;
f.sel.options[f.sel.options.length] = new Option(addText, addValue);
}
function delOption(f){
idx=f.sel.selectedIndex
f.sel.options[idx] = null;
f.sel.selectedIndex=0;
}
</script>

<form>
<input name="txt" type="text">
<input type="button" value="追加" onClick="addOption(this.form)">
<select name="sel">
<option>aaa
<option>bbb
<option>ccc
</select>
<input type="button" value="削除" onClick="delOption(this.form)">
</form>

お礼

丁寧に回答していただきありがとうございました。
これを応用して課題に取り組もうとおもいます。
今後ともよろしくお願いいたします。

回答No.1

midomaru

CGIを使っても良いのか分からないので
Javascriptだけで出来る方法を答えます

1.Javascriptの配列にセレクトボックスの項目を保持
2.innerHTMLで、配列分のセレクトボックスを作成
3.追加ボタンのイベントで配列を増やし、innerHTMLを再構築

削除は配列から削る事で出来るはずです。

お礼

回答ありがとうございます。
初心者なので配列を使いこなすまでレベルがいいてないのですが…
もう少し勉強してから教えていただいた方法もtryしてみようと思います。ありがとうござました。