[JavaScript]


この日記のはてなブックマーク数 このエントリーを含むはてなブックマーク


サンプルはこちらです

[JavaScript部分]

<script type = "text/javascript">
<!--
function functionName()
{
var select1 = document.forms.formName.selectName1; //変数select1を宣言
var select2 = document.forms.formName.selectName2; //変数select2を宣言

select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要

if (select1.options[select1.selectedIndex].value == "果物")
{
select2.options[0] = new Option("りんご");
select2.options[1] = new Option("みかん");
select2.options[2] = new Option("オレンジ");
}

else if (select1.options[select1.selectedIndex].value == "野菜")
{
select2.options[0] = new Option("キャベツ");
select2.options[1] = new Option("きゅうり");
select2.options[2] = new Option("にんんじん");
select2.options[3] = new Option("たまねぎ");
}

else if (select1.options[select1.selectedIndex].value == "肉類")
{
select2.options[0] = new Option("豚肉");
select2.options[1] = new Option("牛肉");
}
}
//-->
</script>


[HTML部分]
<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">

<!--選択肢その1-->
<select name = "selectName1" onChange="functionName()">
<option value = "果物">くだもの</option>
<option value = "野菜">やさい</option>
<option value = "肉類">にくるい</option>
</select>

<!--選択肢その2(選択肢その1の項目によって変化)-->
<select name = "selectName2">
</select>

</body>

なお上記の例ではプログラムに渡される値は表示されている値となります。表示の値とプログラムに渡る値を別にするには以下のようにすればよい。 new Option("りんご","りんごの値");

関連記事
innerText
全角文字チェック
条件演算子
replaceChild
フォームの値を取得
Option
insertBefore
テーブルのデータを取得
hasChildNodes - 子ノードの判定
createElement - エレメント作成
Ajax.Request
encodeURI
zapatec ajax suite
スタイルシートをダイナミックに読み込み
連想配列のように値にアクセス
text及びtextareaの入力チェック
フォームの要素名一覧取得
for in ループ
this keyword
連結演算子
確認ダイアログ
scriptタグによるJavaScriptの宣言
var - 変数の宣言
選択フォームの値を取得
文字列の長さ
コメント
ラジオボタンがチェックされているかを調べるには
マウスのドラッグを禁止する
メールアドレスの書式チェック
郵便番号の書式チェック
フォームのフォーカスを変える
JavaScriptからCGIに値を渡す
location.href - 指定したアドレスに移動
submit()が動かない
二つ以上の関数を呼び出すには
選択肢によってドロップダウンのメニュー項目を変えるには
一つ前のページに戻る
広告