社内の業務改善システムを作るときに、登録画面のフォームで
店舗名を選択してスタッフ名をドロップダウンリストから選ばせるようにしたく、その時に使ったJavaScriptのメモです。
なんてググったらいいかわからず、なかなかいいのが見つからなかった中で、よかったのが下記のです。
選択肢によってドロップダウンのメニュー項目を変えるには
http://www.ksknet.net/javascript/post_54.html自分は、こちらを使いました。店舗ごとにスタッフ(選択肢)の数が変わるので。
[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">
<p><!--選択肢その1-->
<select name = "selectName1" onChange="functionName()">
<option value = "果物">くだもの</option>
<option value = "野菜">やさい</option>
<option value = "肉類">にくるい</option>
</select></p>
<p><!--選択肢その2（選択肢その1の項目によって変化）-->
<select name = "selectName2">
</select></p>
<p></body></p>
なお上記の例ではプログラムに渡される値は表示されている値となります。表示の値とプログラムに渡る値を別にするには以下のようにすればよい。
new Option("りんご","りんごの値");
セレクトボックスの操作
http://www.pori2.net/js/form/5.htmlこちらの場合は、選択肢の数が同数の場合に使えます。選択肢の数がバラバラの場合は、上記を使ってください。
<form name="selbox">
<p>好きなプロ野球リーグは？</p>
<select <span class="red">name="league"</span> <strong>onchange</strong>="teamSet()">
<option value="">*リーグ選択</option>
<option value="">セ・リーグ</option>
<option value="">パ・リーグ</option>
</select>
<p>好きなチームは？</p>
<select <span class="red">name="team"</span>>
<option value="">*チーム選択</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form>
<script>
<span class="comment">//セ・リーグのチームの配列</span>
var s_league=new Array(
<span class="red">""</span>,"中日","ヤクルト","巨人","阪神","横浜","広島"
);
<span class="comment">//パ・リーグのチームの配列</span>
var p_league=new Array(
<span class="red">""</span>,"ロッテ","西武","オリックス","ソフトバンク","楽天","日本ハム"
);
function teamSet(){
<span class="comment">//オプションタグを連続して書き換える</span>
for ( i=1; i<7; i++ ){
<span class="comment">//選択したリーグによって分岐</span>
switch (document.selbox.league.<strong class="std">selectedIndex</strong>){
case 0: document.selbox.team.<strong class="std">options[i].text</strong>="";break;
case 1: document.selbox.team.<strong class="std">options[i].text</strong>=s_league[i];break;
case 2: document.selbox.team.<strong class="std">options[i].text</strong>=p_league[i];break;
}
}
<span class="comment">//チーム名のセレクトボックスの選択番号を０にする</span>
document.selbox.team.<strong class="std">selectedIndex</strong>=0;
}
</script>
リンク
リンク
Вау, эту статью предложила поклонникам страницы моя сестра.
Ее действительно интересует данная тема, обещаю передать ей ваши отзывы.
Настало, чтобы составить несколько планов
на ближайшее будущее. Я изучил этот блог и, если необходимо, могу
посоветовать вам несколько цепляющих вещей или предложений.
Возможно, вы планируете написать следующие статьи в завершение этой.
Я хочу читать еще больше материалов об этом!
идеальное, чтобы составить парочку планов на
долгосрочную перспективу.
Я читал этот материал и, если
необходимо, хочу предложить вам несколько интересных вещей или
советов. Возможно, вы планируете написать следующие статьи в завершение этой.
Я хочу читать еще больше информации об этом!