フォームセレクトに項目を追加したい

質問

フォームのセレクトの<option>に項目を追加していきたいのですが、どうもやり方がわからないので教えてください。

ここを参考にして<option>の項目の追加はできましたが、valueを定義できませんでした。
http://www.kawa.net/works/js/jkl/form-updown.html

何かよい方法はないでしょうか？
参考になるサイトでもかまいません。
よろしくお願いします。

回答No.1

noname#39970 · ベストアンサー

http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=javascript%20form%20option%20%E9%A0%85%E7%9B%AE%E3%82%92%E8%BF%BD%E5%8A%A0

document.createElement　の方が早いかも。

お礼

とても参考になりました。いろんなサイトでいろいろな方法があり、とても勉強になりました！無事、目的を達成できましてなによりです。
ただしFireFoxではJavaが動作しませんでした。

回答No.2

yambejp

こんな感じで

<script language=javascript>
function shift(selid,num){
var sel=document.getElementById(selid);
if(sel.selectedIndex<0) return false;
if(sel.selectedIndex==0 && num<0) return false;
if(sel.selectedIndex==sel.length -1 && num>0) return false;
var idx=sel.selectedIndex;
sel.insertBefore(sel.options[idx],sel.options[idx+(num>0?num+1:num)]);
sel.selectedIndex=idx+num;
}
function delopt(selid){
var sel=document.getElementById(selid);
if(sel.selectedIndex<0) return false;
var idx=sel.selectedIndex;
var opt=sel.options[idx];
sel.removeChild(opt);
sel.selectedIndex=(sel.length==idx)?idx -1:idx;
}
function addopt(f,selid,keyid,textid){
var sel=document.getElementById(selid);
var keyval=document.getElementById(keyid).value;
var textval=document.getElementById(textid).value;
if(keyval=="" || textval=="") return false;
var opt = document.createElement("option");
var str = document.createTextNode(textval);
opt.appendChild(str);
opt.setAttribute("value",keyval);
var idx=sel.selectedIndex;
if(idx<0) idx=0;
sel.insertBefore(opt,sel.options[idx]);
sel.selectedIndex=idx;
}
</script>
<form>
<select id="hoge" multiple style="height:100px;width:80px;">
<option value="1">データ1</option>
<option value="2">データ2</option>
<option value="3">データ3</option>
<option value="4">データ4</option>
<option value="5">データ5</option>
</select>
<hr>
<input type="button" value="↑"onClick="shift('hoge',-1)" >
<input type="button" value="↓"onClick="shift('hoge',1)" >
<input type="button" value="追加" onClick="addopt(this.form,'hoge','addkey','addtext')" >
<input type="button" value="削除" onClick="delopt('hoge')" >
<input type="button" value="てすと" onClick="alert('index:'+this.form.hoge.selectedIndex+'\nkey:'+this.form.hoge.value+'\ntext:'+this.form.hoge.options[this.form.hoge.selectedIndex].text)">
<hr>
キー<input tyle="text" id="addkey" value="testkey">
テキスト：<input tyle="text" id="addtext" value="てすと">
</form>

お礼

非常に精密なコードをどうもありがとうございました！
結局私が使ったのは↓なかんじでした。

function addList(obj, val)
{
document.getElementById("result_month").length = document.getElementById("result_month").length + 1
document.getElementById("result_month").options[document.getElementById("result_month").length - 1].text = obj
document.getElementById("result_month").options[document.getElementById("result_month").length - 1].value = val
}