セレクトボックスで選択された内容での切り替え

質問

こんにちは。

日にちを選択するセレクトボックスAと、
時間を選択するセレクトボックスB、Cを用意します。

はじめはAとBが表示されている状態です。

Aを選択したときに、
Aのボックスの中身が土日ならば、Bを消して（display：none）Cを表示させ、
Aのボックスの中身が平日ならば、そのままBを表示させたいです。

何度も日にちを変更してもB、Cの切り替えをおこないたいんです。。

しかも同じものを3つ用意したいんです。
一つ目はなんとか動くんですが、
二つ目と三つ目がうまく動きません。

一つ目のAが平日の場合だと、二つ目と三つ目のAが土日であっても平日の表示
（この場合セレクトボックスBが表示）されてしまいます。。。

初心者です。。なにかアドバイスなどいただけませんでしょうか？？
書き方も手探りなんで、ぐちゃぐちゃかと思います。。赤を入れて頂けると幸いです。。

現状はこんな感じです。。

select.mfpはセレクトボックスA
.time0１はセレクトボックスB
.time02はセレクトボックスCです。

$("select.mfp").change(function () {
var str = $("select.mfp option:selected").text();
var STR =str.charAt(12);
// if (STR=="土" || STR=="日"){
// $(this).parent().children(".time02").css( 'display', 'block' )
// $(this).parent().children(".time01").css( 'display', 'none' );
// }else{
// $(this).parent().children(".time01").css( 'display', 'block' )
// $(this).parent().children(".time02").css( 'display', 'none' )
// }
}).change();

－－－－－－－HTML－－－－－－－－－－－－
<tr class="mfptr">
<td id="second"><!--<input type="hidden" name="ご予約日[join]年+月+日+時間+分" value="" />-->
<p class="float">●第一希望　</p>
<script type="text/javascript" src="./contact/commons/choice_date.js"></script>
（↑これで日付のセレクトボックスを生成しています。）
<select name="時間" class="mfp time01">
<option value="時間">時間</option>
</select>
<select name="時間" class="mfp time02">
<option value="時間2">時間2</option>
</select>
</td>
</tr>

解りづらくてすみません。。

宜しくお願いします。

回答No.1

yui-magic

>>しかも同じものを3つ用意したいんです。

同じものを三つとはA、B、Cの3つをひとまとまりとして考えて
それが3つあるということでしょうか？
でしたら、こんな感じでどうでしょう？

-----------javascript--------------

$(function()
{
$(".c").css("display","none");
$(".a").change(function()
{
var val=$(this).val();
if(val=="平日")
{
$(this).parent().find(".b").css("display","inline");
$(this).parent().find(".c").css("display","none");
}
else if(val=="土日")
{
$(this).parent().find(".b").css("display","none");
$(this).parent().find(".c").css("display","inline");
}
});
});

-----------html--------------

<div>
<select name="曜日" class="a">
<option value="平日">平日</option>
<option value="土日">土日</option>
</select>
<select name="時間" class="b">
<option value="時間">時間</option>
</select>
<select name="時間2" class="c">
<option value="時間2">時間2</option>
</select>
</div>

<!--二つ目-->
<div>
<select name="曜日" class="a">
<option value="平日">平日</option>
<option value="土日">土日</option>
</select>
<select name="時間" class="b">
<option value="時間">時間</option>
</select>
<select name="時間2" class="c">
<option value="時間2">時間2</option>
</select>
</div>

<!--三つ目-->
<div>
<select name="曜日" class="a">
<option value="平日">平日</option>
<option value="土日">土日</option>
</select>
<select name="時間" class="b">
<option value="時間">時間</option>
</select>
<select name="時間2" class="c">
<option value="時間2">時間2</option>
</select>
</div>

お礼

ありがとうございます！
おかげさまで、
なんとかできました！！

ありがとうございました！