こんにちは。いつもお世話になっております。
セレクトボックスについて質問なのですが、JavaScrptを用いて
セレクトボックスのどれかを自動的に選択する事は可能でしょうか?
具体的には、年月日をとりだして、セレクトボックスの対応する項目を自動選択したいのです。
どなたかご存知の方いらっしゃいましたら、どうか教えてください。
よろしくお願いします。

A 回答 (1件)

年月日はdateオブジェクトを作成して取り出すことができます。


月/日の値から1を引いて、0から始まるセレクトボックスのIndexに合わせます。
その値をselectedIndexに代入すればOKです。
つまり月のセレクトボックスであれば、0番目が1、1番目が2・・・となるので、8月を選択状態にしたければ、selectedIndexを7にすればOKということです。

サンプルをアップしてみたので、参考URLの1つ目から確認してみてください。

またJavaScriptやdateオブジェクトに関しては、参考URL2つ目の「とほほのWWW入門」の「JavaScriptリファレンス」をご参考ください。

参考URL:http://users.goo.ne.jp/leaz/select-date/, http://tohoho.wakusei.ne.jp/www.htm
    • good
    • 0
この回答へのお礼

ドンピシャなご回答ありがとうございました!
selectedIndexですか。これが分からなくて困っていました。
とっても分かりやすいサンプルもありがとうございました。
また困った時、よろしくお願いします。m(_ _)m

お礼日時:2001/08/28 13:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qセレクトメニューの選択項目によって、もう1つのセレクトメニューの項目と項目数を変更する

もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。
たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。

Aベストアンサー

試しに作ってみました。 こういう感じでしょうか。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列
menu2val = new Array(); // 2つ目のメニューのvalue値用配列
menu2txt["a"] = new Array();
menu2val["a"] = new Array();
menu2txt["b"] = new Array();
menu2val["b"] = new Array();
menu2txt["c"] = new Array();
menu2val["c"] = new Array(); // 二次配列作成

menu2txt["a"][0] = "項目A1";
menu2val["a"][0] = "A1";
menu2txt["a"][1] = "項目A2";
menu2val["a"][1] = "A2";
menu2txt["a"][2] = "項目A3";
menu2val["a"][2] = "A3";
menu2txt["a"][3] = "項目A4";
menu2val["a"][3] = "A4";
menu2txt["a"][4] = "項目A5";
menu2val["a"][4] = "A5";

menu2txt["b"][0] = "項目B1";
menu2val["b"][0] = "B1";
menu2txt["b"][1] = "項目B2";
menu2val["b"][1] = "B2";
menu2txt["b"][2] = "項目B3";
menu2val["b"][2] = "B3";

menu2txt["c"][0] = "項目C1";
menu2val["c"][0] = "C1";
menu2txt["c"][1] = "項目C2";
menu2val["c"][1] = "C2";
menu2txt["c"][2] = "項目C3";
menu2val["c"][2] = "C3";
menu2txt["c"][3] = "項目C4";
menu2val["c"][3] = "C4";
menu2txt["c"][4] = "項目C5";
menu2val["c"][4] = "C5";
// 以上、セレクトメニューの表示項目とvalue値を配列に格納

function set_menu(){
key = document.f1.menu1.value;
while (document.f1.menu2.options[0]){
document.f1.menu2.options[0] = null; // 2つ目のメニューを消去
}
for (i=0; i<menu2txt[key].length; i++){
document.f1.menu2.options[i] = new Option(menu2txt[key][i],menu2val[key][i]);
// 2つ目のメニューの項目を生成・表示テキストとvalue値を設定
}
}

window.onload = set_menu; // ページロード時にmenu1の初期値でmenu2を設定
// -->
</script>
</head>
<body>

<form action="#" name="f1">
<div>
<select name="menu1" onchange="set_menu()">
<option value="a">Aタイプ</option>
<option value="b">Bタイプ</option>
<option value="c">Cタイプ</option>
</select>
<select name="menu2">
</select>
</div>
</form>

</body>
</html>

参考になれば…

試しに作ってみました。 こういう感じでしょうか。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
menu2txt = new Array(); // 2つ目のメニューの項目表示テキスト用配列
menu2val = new Array(); // 2つ目のメニューのvalue値用配列
menu2txt["a"] = new Array();
menu2val["a"] = new Array();
menu2txt["b"] = new Array();
menu2val["b"] = new Array();
menu2txt["c"] = new Array();
menu2val["c"] = new Array(); // 二次配列作成

menu2txt["a"][0] = "項目A...続きを読む

Qセレクトボックスの項目ごとにテキストボックスの数値を参照するには??

初心者なのにjavascriptで作ろうとしているのが
悪いのですが、完全に煮詰まっています。
助けてください。


カロリー計算なんですが、朝食・昼食など食事毎に
セレクトボックスの食品項目を選択していきます。
(食品項目は、本来は数十項目あります)
次に選択された項目のグラムをテキストボックスで入力します。
そして、それを食品毎にカロリー計算して合計のカロリーを表示します。
answer=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)
が、カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)といった感じです。

セレクトボックスのオプション項目の食品は、朝食・昼食問わず、同一です。
食品1・2は選択されない場合もあります。
もっと簡単に作れる入力書式などの変更も考えましたが、
諸事情により、この方式の入力・結果表示が必要なんです。


なにぶんボランティアサークルで予算も何もなくHP作成を外部に
依頼するのも不可能です。
少し出来る人が作っている程度です。
他に頼る人もいないので、出来なければ諦めざるえない状況なんで
今、本を読みながら独学で作っています。
どうかお助けください。
厚かましいですが、よろしくお願いします。
<HEAD>
<SCRIPT language="JavaScript">
function calc(){

var A =
var B =
var C =
var D =
var E =

document.f1.answer.innerText = (A*0.1)+(B*0.2)+(C*0.3)+(D*0.4);
}
window.onload=calc;
</SCRIPT>
</HEAD>
<BODY>
<form id="f1">
計算結果の計算式<BR>
【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】<BR>
カロリー<INPUT size="20" type="text" name="answer"><BR>
<BR>
朝食<BR>
食品1<SELECT name="s11">
<OPTION value="0" selected>選択項目</OPTION>
<OPTION value="1">ご飯</OPTION>
<OPTION value="2">肉</OPTION>
<OPTION value="3">魚</OPTION>
<OPTION value="4">野菜</OPTION>
<OPTION value="5">牛乳</OPTION>
</SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR>
食品2<SELECT name="s12">
<OPTION value="0" selected>選択項目</OPTION>
<OPTION value="1">ご飯</OPTION>
<OPTION value="2">肉</OPTION>
<OPTION value="3">魚</OPTION>
<OPTION value="4">野菜</OPTION>
<OPTION value="5">牛乳</OPTION>
</SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR>
<BR>
昼食<BR>
食品1<SELECT name="s21">
<OPTION value="0" selected>選択項目</OPTION>
<OPTION value="1">ご飯</OPTION>
<OPTION value="2">肉</OPTION>
<OPTION value="3">魚</OPTION>
<OPTION value="4">野菜</OPTION>
<OPTION value="5">牛乳</OPTION>
</SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR>
食品2<SELECT name="s22">
<OPTION value="0" selected>選択項目</OPTION>
<OPTION value="1">ご飯</OPTION>
<OPTION value="2">肉</OPTION>
<OPTION value="3">魚</OPTION>
<OPTION value="4">野菜</OPTION>
<OPTION value="5">牛乳</OPTION>
</SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR>
 </FORM>
</BODY>

初心者なのにjavascriptで作ろうとしているのが
悪いのですが、完全に煮詰まっています。
助けてください。


カロリー計算なんですが、朝食・昼食など食事毎に
セレクトボックスの食品項目を選択していきます。
(食品項目は、本来は数十項目あります)
次に選択された項目のグラムをテキストボックスで入力します。
そして、それを食品毎にカロリー計算して合計のカロリーを表示します。
answer=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)
が、カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)といった感じで...続きを読む

Aベストアンサー

こんな感じでやると、無駄に名前をつけたりするのに悩まないですむと
おもいますよ。

<html>
<head>
<script type="text/javascript">
function calc(){
var f=document.getElementById('f1');
var calorie={"ご飯":0.1,"肉":0.2,"魚":0.3,"野菜":0.4,"牛乳":0.5};
var divs=f.getElementsByTagName('div');
var sum=0;
for(var i=0;i<divs.length;i++){
var thiscalorie=0;
var thisquantity=0;
var cn=divs[i].firstChild;
while(cn){
if(cn.nodeName=="SELECT" && cn.className=="item" && cn.value!="") thiscalorie=calorie[cn.value];
if(cn.nodeName=="INPUT" && cn.className=="quantity") thisquantity=cn.value;
cn=cn.nextSibling;
}
sum+=thiscalorie*thisquantity;
}
f.answer.value=sum;
}
window.onload=function(){
var f=document.getElementById('f1');
for(var i=0;i<f.length;i++){
if(f[i].className=="item"||f[i].className=="quantity"){
f[i].onchange=function(){calc()};
}
}
calc();
}
</script>
</head>
<body>
<form id="f1">
<div>計算結果の計算式<br>
【カロリー(answer)=(a*0.1)+(b*0.2)+(c*0.3)+(d*0.4)】<br>
カロリー<input size="20" type="text" name="answer"><br>
<br>
</div>
<div>朝食</div>
<div>食品1
<select class="item">
<option value="" selected>選択項目</option>
<option value="ご飯">ご飯</option>
<option value="肉">肉</option>
<option value="魚">魚</option>
<option value="野菜">野菜</option>
<option value="牛乳">牛乳</option>
</select>
 左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br>
</div>
<div>
食品2
<select class="item">
<option value="" selected>選択項目</option>
<option value="ご飯">ご飯</option>
<option value="肉">肉</option>
<option value="魚">魚</option>
<option value="野菜">野菜</option>
<option value="牛乳">牛乳</option>
</select>
 左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br>
<br>
</div>
<div>昼食</div>
<div>
食品1
<select class="item">
<option value="" selected>選択項目</option>
<option value="ご飯">ご飯</option>
<option value="肉">肉</option>
<option value="魚">魚</option>
<option value="野菜">野菜</option>
<option value="牛乳">牛乳</option>
</select>
 左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br>
</div>
<div>
食品2
<select class="item">
<option value="" selected>選択項目</option>
<option value="ご飯">ご飯</option>
<option value="肉">肉</option>
<option value="魚">魚</option>
<option value="野菜">野菜</option>
<option value="牛乳">牛乳</option>
</select>
 左で選択した項目のグラム<input size="10" type="text" value="0" class="quantity"><br>
</div>
</form>
</body>
</html>

こんな感じでやると、無駄に名前をつけたりするのに悩まないですむと
おもいますよ。

<html>
<head>
<script type="text/javascript">
function calc(){
var f=document.getElementById('f1');
var calorie={"ご飯":0.1,"肉":0.2,"魚":0.3,"野菜":0.4,"牛乳":0.5};
var divs=f.getElementsByTagName('div');
var sum=0;
for(var i=0;i<divs.length;i++){
var thiscalorie=0;
var thisquantity=0;
var cn=divs[i].firstChild;
while(cn){
if(cn.nodeName=="SELEC...続きを読む

Qセレクトボックスで選択した内容をテキストボックスへ

こんにちは、初めて質問させて頂きます。
現在、下記のような形式で、選んだテキストをテキストボックスに追加する仕様を使っています。
これをテキストではなく、プルダウン形式のセレクトボックスで選択できるようにはできないでしょうか?

<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='鉄 '">鉄</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='アルミ '">アルミ</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='塩ビ '">塩ビ</A><BR>

<FORM name="myform">
<INPUT TYPE="TEXT" NAME="comment" SIZE="50">
</form>


お手数ですが、もし宜しければお知恵をお貸し下さい。

こんにちは、初めて質問させて頂きます。
現在、下記のような形式で、選んだテキストをテキストボックスに追加する仕様を使っています。
これをテキストではなく、プルダウン形式のセレクトボックスで選択できるようにはできないでしょうか?

<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='鉄 '">鉄</A><BR>
<A HREF="javascript:function voi(){};voi()" onClick="document.myform.comment.value+='アルミ '">アルミ</A><BR>
<A HREF="javascript:function voi(){};vo...続きを読む

Aベストアンサー

連続入力することもかんがえるとこうするとよいかも

<script>
function hoge(obj){
var f=obj.form;
var v=obj.options[obj.selectedIndex].value;
var c=f.elements["comment"];
c.value+=v;
obj.selectedIndex=0;
}
</script>
<form>
<p>
<select onchange="hoge(this)">
<option value="" >選択してね</option>
<option value="鉄">鉄</option>
<option value="アルミ">アルミ</option>
<option value="塩ビ">塩ビ</option>
</select>
<input type="text" name="comment" value="">
</p>
</form>

Q複数のセレクトボックスの値から別のセレクトボックス

この度はお世話になります。
複数(4個)のselectboxからselectboxの値の組み合わせによって、別のselectbox(1個)の選択肢を変えたいのですが、どなたか助けていただけませんでしょうか?

動作のイメージは以下の通りです。

selectboxAの選択肢:1,2,3,4,5,
selectboxBの選択肢:あ,い,う,え,お,
selectboxCの選択肢:ア,イ,ウ,エ,オ,
selectboxDの選択肢:a,i,u,e,o,

上記の操作で、
selectboxA に1 selectboxB に い selectboxCに ウ selectboxDに e と
selectboxA に5 selectboxB に え selectboxCに ウ selectboxDに i の
組み合わせが選択されたときのみ、

selectbox E の選択肢に あいうえお,かきくけこ,さしすせそ,が表示され、

それ以外のselectbox A~Dの選択肢の組み合わせの時はすべて、
たちつてと,なにぬねの,はひふへほ, の選択肢が表示されます。

各selectボックスの選択肢は、選択肢の数により増減します。
また選択肢Aには数字を使ってますが、すべて文字列として扱いたいです。

ネット上でjavascript のサンプルプログラム等も見て、色々と試してみたのですが、
なかなかハードルが高く困っております。

当方素人。任意の集まりで使います。何卒よろしくお願い致します。

この度はお世話になります。
複数(4個)のselectboxからselectboxの値の組み合わせによって、別のselectbox(1個)の選択肢を変えたいのですが、どなたか助けていただけませんでしょうか?

動作のイメージは以下の通りです。

selectboxAの選択肢:1,2,3,4,5,
selectboxBの選択肢:あ,い,う,え,お,
selectboxCの選択肢:ア,イ,ウ,エ,オ,
selectboxDの選択肢:a,i,u,e,o,

上記の操作で、
selectboxA に1 selectboxB に い selectboxCに ウ selectboxDに e と
selectboxA に5 selectboxB に え selectboxC...続きを読む

Aベストアンサー

配列変数に「あいうえお,かきくけこ,さしすせそ」と「たちつてと,なにぬねの,はひふへほ, 」を作ります。
次にselectboxA~Dのvalueを取得してif elseを使用してselectboxEのvalueに「あいうえお,かきくけこ,さしすせそ」か「たちつてと,なにぬねの,はひふへほ, 」を入れてあげればいいと思いますよ。

イメージ的には以下のような形だと思います。

selectboxA~Dのvalueがチェンジされた場合のイベントハンドラ {
if(~~~) {
selectboxE.value = 「あいうえお,かきくけこ,さしすせそ」
} else {
selectboxE.value = 「あいうえお,かきくけこ,さしすせそ」
}
}

Qセレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい

web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。

1. topページにセレクトボックスを設置。
2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。
3. 2を繰り返す。

このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。

script_test01.htmlの内容
--------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
<script type='text/javascript' src='script_test01.js'>
</script>
<br>
<form name='form_0'>
<select onchange='rewrite()' name='sel_0'>
<option>A or B</option>
<option>A</option>
<option>B</option>
</select>
</body>
</html>
--------------------------------------------------

script_test01.jsの内容
--------------------------------------------------
function rewrite() {
var sel_in =document.form_0.sel_0.options.selectedIndex;
var sel_name = document.form_0.sel_0.options[sel_in].text;
document.write('<html>\n');
document.write('<head>\n');
document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n');
document.write("<script type='text/javascript' src='script_test01.js'>\n");
document.write("</script>\n");
document.write('</head>\n');
document.write('<body>\n');
document.write(sel_in,' : ',sel_name,'<br>\n');

/*↓この部分がうまくいかない
document.write('<br>\n');
document.write('<form name='form_0'>\n');
document.write('<select onchange='rewrite()' name='sel_0'>\n');
document.write('<option>A or B</option>\n');
document.write('<option>A</option>\n');
document.write('<option>B</option>\n');
document.write('</select>\n');
/*↑この部分がうまくいかない

document.write('</body>\n');
document.write('</html>\n');
}
--------------------------------------------------

script_test01.jsのコメントアウトをはずすとエラーになります。
script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。

あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。
topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか?「日本語[EUC]」に出来ないでしょうか?

web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。

1. topページにセレクトボックスを設置。
2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。
3. 2を繰り返す。

このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。

script_test01.htmlの内容
-----------------------------------------...続きを読む

Aベストアンサー

document.write('<form name='form_0'>\n');
document.write('<select onchange='rewrite()' name='sel_0'>\n');
この2行。’の中に’が入っている。
\’のようにエスケープするか、”を使いましょう。

後、document.writeの前後のopen/closeを行いましょう。
特にcloseが無い為、永遠に読み続けるのが鬱陶しいです。


文字コードに関しては、JavaScriptは内部処理でunicodeを使用している為。
documentのopen後に、「document.charset='EUC-JP';」のような指定をすることで解消できます。


人気Q&Aランキング

おすすめ情報