セレクトボックスで選択された内容での切り替え
こんにちは。
日にちを選択するセレクトボックス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>
解りづらくてすみません。。
宜しくお願いします。
お礼
ご回答ありがとうございます。 ご回答いただいたとおりの事をしたいと思っていました。 できました！ 一日できなったことが5分でできました。 助かりました。 ほんとうにありがとうございます。 また何かありました是非よろしくお願いいたします。