dポイントプレゼントキャンペーン実施中！

selectボックスの選択結果を変数に代入したい

解決済

  • 質問者：natto3848
  • 質問日時：
  • 回答数：3件

ブログのホームページで過去のブログカレンダーを表示させるために、年と月をセレクトボックスから入力して希望の年月のカレンダーを表示させようと頑張っています。
下記プログラムを作成しましたが、selectボックスから選択した年号を変数に代入することが出来ず、取得した年号をjavaの内部処理に使うことが出来ません。
考えられることはいろいろやってみましたが、全て変数に代入するところでうまくいきません。
よろしくご指導お願いします。


<html>
<head>
<title>選択された表示テキストを取得する</title>
</head>

<body>
<select name="year" onchange="alert(getSelectedText(this))">
<option value="1">2014</option>
<option value="2">2013</option>
<option value="3">2012</option>
</select><a>年</a>

<script type="text/javascript">
function getSelectedText(obj){
var txt = obj.options[obj.selectedIndex].text; // 表示テキスト取得
return 'text = ' + txt; // 表示テキストをリターン
var selectYear = text; // 表示テキストを変数に代入
}
alert(selectYear); // 変数の内容をアラート表示

/*if(selectYear==2014){　　　　　　　　　　　// 変数を内部処理に使用
document.write('\
<select name="month" onchange="selectMonth(this)">\
<option value="1">1</option>\
<option value="2">2</option>\
<option value="3" selected>3</option>\
<option value="4">4</option>\
</select><a>月</a>\
');*/

</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

No.2 の補足に対して



関数 getSelectedText ですが、名前が実態を表していないので変えましょう
例)
<select name=year onchange="onChangeYearSelect(this)">
function onChangeYearSelect(selectElement) { ... }

要素 <select name="month"> ですが、直に内部処理を呼ぶのではなく、
変更された値を処理するイベント関数を一段かませましょう
例)
<select name=month onchange="onChangeMonthSelect(this)">
function onChangeMonthSelect(selectElement) { イベント処理; goCalender(); }

セレクトボックスが onchange されたら、内部処理用の変数を更新しましょう
例)
function onChangeYearSelect(selectElement) { goCalender.year = 選択された値; }
function onChangeMonthSelect(selectElement) { goCalender.month = 選択された値; }

プログラム中の記号の打ち間違えは致命的です。
> var selYear = me.year; // ピリオドなのでOK
> var selMonth = me,month; // カンマなのでNG
参考) http://d.hatena.ne.jp/kmori58/20051208/p3

間違ったコメントは事故の元です
> monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月
    • good
    • 0
    • 件
通報する
この回答へのお礼

Ogre7077さん

お陰さまでうまく行きました。
度重なるご指導、誠にありがとうございました。

カンマとピリオドを間違えてマリーナ１号が失敗に終わったとは知りませんでした。プログラムの担当者は一生悔やみますね。

完成したスクリプトを添付します。

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<style>
</style>

<body>
<select name="year" onchange="onChangeYearSelect(this);">
<option value="">----</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select><a>年　</a>
<select name="month" id="month" onchange="onChangeMonthSelect(this);">
<option value="">--</option>
</select><a>月</a>

<script>

var monthArray = new Array();
monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月
monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年
monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2009年が選択された場合に表示する月

function onChangeYearSelect(obj) {
var year = obj.options[obj.selectedIndex].value; // 選択された年を取得
var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得
if ( year === '' ) {
monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了
return;
}
var month = monthArray['y'+year]; // 年で表示月を取得
monthObj.length = month.length+1; // option用の領域を広げる
for ( var i = 0; i < month.length; i ++ ) {
monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する
monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加
}
monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする
var opt = obj.options[obj.selectedIndex]; // 年を取得
goCalender.year = opt.text;
}

function onChangeMonthSelect(obj){
var opt = obj.options[obj.selectedIndex]; // 月を取得
goCalender.month = opt.text;
goCalender();
}

function goCalender(obj){
var me = arguments.callee;
var selYear = me.year; // 年を変数に代入
var selMonth = me.month; // 月を変数に代入
alert(selYear + selMonth);
}

</script>

</body>
</head>
</html>

通報する
お礼日時：2014/03/16 18:20

No.2

  • 回答者： Ogre7077
  • 回答日時：

なんだか良く分かりませんが、こういうことでしょうか


「内部処理に使用する変数」を、内部処理を行う関数オブジェクトのプロパティで表現しました

<form>
<select name="year" onchange="年号が変更された(this)">
<option value="" selected>--</option>
<option value="1">2014</option>
<option value="2">2013</option>
<option value="3">2012</option>
</select>年
</form>

<script>
function 年号が変更された(obj) {
var opt = obj.options[obj.selectedIndex];
年月を使う内部処理.year = opt.text; // 選択結果を変数に代入
年月を使う内部処理();
}
function 年月を使う内部処理() {
var me = arguments.callee;
var 年号 = me.year; // 変数から読み取り
var 月名 = me.month; // maybe
alert(年号 + 月名); // 内部処理で使う
}
</script>

この回答への補足

LancerVIIさん、Ogre7077さん
ご丁寧な説明を頂き、ありがとうございます。
LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。
それに追加してOgre7077さんの内部処理のスクリプトを入れてみましたが、
alertで月名がうまく表示出来ません。
セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonhangeを追加しました。
勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<style>
</style>
<script>
var monthArray = new Array();
monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月
monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月
monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月

function getSelectedText(obj) {
var year = obj.options[obj.selectedIndex].value; // 選択された年を取得
var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得
if ( year === '' ) {
monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了
return;
}

var month = monthArray['y'+year]; // 年で表示月を取得
monthObj.length = month.length+1; // option用の領域を広げる
for ( var i = 0; i < month.length; i ++ ) {
monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する
monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加
}
monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする
}
</script>

<body>
<select name="year" onchange="getSelectedText(this);">
<option value="">----</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select><a>年　</a>
<select name="month" id="month" onchange="goCalender(this);">
<option value="">--</option>
</select><a>月</a>

<script>/*
function getSelectedText(obj){
var opt = obj.options[obj.selectedIndex];
goCalender.year = opt.text;
goCalender();
}
function goCalender(obj){
var me = arguments.callee;
var selYear = me.year;
var selMonth = me,month;
alert(selYear + selMonth);
}*/
</script>

</body>
</head>
</html>

補足日時：2014/03/15 15:23
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



仕様は
2014年だったら1月～4月を表示
2013年だったら1月～12月を表示
2012年だったら1月、3月を表示
とかそんな感じですか？
それとも未来の月は表示しない感じですか？

仕様が確定していたとしても■のコメントを見てみてください。

function getSelectedText(obj){
var txt = obj.options[obj.selectedIndex].text; // 表示テキスト取得
return 'text = ' + txt; // 表示テキストをリターン
// ■上でリターンしているのだからこの行は実行されない
// ■また、それが解消してもtextという変数は用意していない
// ■かつvarで宣言した場合そのブロックのみでしか使えない
var selectYear = text; // 表示テキストを変数に代入
}
// ■仮にselectYearがグローバル変数で定義されていたとしても
// ■getSelectedTextが実行されないと値は入らない
// ■ここはすぐ実行されちゃう
alert(selectYear); // 変数の内容をアラート表示

また、document.writeをページロード後に実行するとbodyの内容が全て書き換わってしまいます。


仕様が確定していないのでこんな感じかな？というのが以下のスクリプトです。
年を選択すると、その年に表示したい月を表示します。
表示したい月は配列にて保持しています。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script>
var monthArray = new Array();
// 2014年が選択された場合に表示する月
monthArray['y2014'] = new Array ( 1, 2, 3, 4 );
// 2013年が選択された場合に表示する月
monthArray['y2013'] = new Array ( 2, 3 );
// 2012年が選択された場合に表示する月
monthArray['y2012'] = new Array ( 9, 10 );

function getSelectedText ( obj ) {
// 選択された年を取得
var year = obj.options[obj.selectedIndex].value;
// 月表示用のオブジェクトを取得
var monthObj = document.getElementById('month');
if ( year === '' ) {
// 「年を選択」が選択された場合は選択をクリアして処理終了
monthObj.length = 1;
return;
}
// 年で表示月を取得
var month = monthArray['y'+year];
// option用の領域を広げる
monthObj.length = month.length+1;
for ( var i = 0; i < month.length; i ++ ) {
// 取得した表示月の分、optionを追加する
// 先頭には「--」が存在するためi+1から追加
monthObj.options[i+1].text = month[i];
monthObj.options[i+1].value = month[i];
}
// 先頭の「--」を選択状態とする
monthObj.options[0].selected = true;
}
</script>
<body>
<select name="year" onchange="getSelectedText(this);">
<option value="">年を選択</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select><a>年</a>
<select name="month" id="month">
<option value="">--</option>
</select>
</body>
</head>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

LancerVIIさん、
ご丁寧な説明を頂き、ありがとうございます。
LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。ありがとうございました。


セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonchangeを追加して、２番目に回答していただいたOgre7077さんの内部処理のスクリプトを入れてみました。
しかし、alertで月名がうまく表示出来ません。
勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset="Shift_JIS">
<style>
</style>
<script>
var monthArray = new Array();
monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月
monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月
monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 );
monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2009年が選択された場合に表示する月

function getSelectedText(obj) {
var year = obj.options[obj.selectedIndex].value; // 選択された年を取得
var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得
if ( year === '' ) {
monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了
return;
}

var month = monthArray['y'+year]; // 年で表示月を取得
monthObj.length = month.length+1; // option用の領域を広げる
for ( var i = 0; i < month.length; i ++ ) {
monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する
monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加
}
monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする
}
</script>

<body>
<select name="year" onchange="getSelectedText(this);">
<option value="">----</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select><a>年　</a>
<select name="month" id="month" onchange="goCalender(this);">
<option value="">--</option>
</select><a>月</a>

<script>/*
function getSelectedText(obj){
var opt = obj.options[obj.selectedIndex];
goCalender.year = opt.text;
goCalender();
}
function goCalender(obj){
var me = arguments.callee;
var selYear = me.year;
var selMonth = me,month;
alert(selYear + selMonth);
}*/
</script>

</body>
</head>
</html>

通報する
お礼日時：2014/03/16 11:12

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報