フォームで選択した回答によって、次の項目を表示・非表示にするには？

Question

タイトルのように、複数項目の場合にどうすればいいですか？

■html

<form> <select class="parent"> <option value="" >以下よりお選びください</option> <option class="b" value="男性" {q1_a::select::男性}>男性</option> <option value="女性" {q1_a::select::女性}>女性</option> </select> <div id="b" class="on">

          <select>
            <option value="" >以下よりお選びください</option>
            <option value="10代"  {q1_b::select::10代}>１０代</option>
            <option value="20代"  {q1_b::select::20代}>２０代</option>
            <option value="30代"  {q1_b::select::30代}>３０代</option>
            <option value="40代"  {q1_b::select::40代}>４０代</option>
            <option value="50代"  {q1_b::select::50代}>５０代</option>
            <option value="60代"  {q1_b::select::60代}>６０代</option>
            <option value="70代"  {q1_b::select::70代}>７０代</option>
            <option value="80代以上"  {q1_b::select::80代以上}>８０代以上</option>
          </select>
          

</div> <select class="parent"> <option value="" >以下よりお選びください</option> <option class="c" value="男性" {q1_a::select::男性}>男性</option> <option value="女性" {q1_a::select::女性}>女性</option> </select> <div id="c" class="on">

          <select>
            <option value="" >以下よりお選びください</option>
            <option value="10代"  {q1_b::select::10代}>１０代</option>
            <option value="20代"  {q1_b::select::20代}>２０代</option>
            <option value="30代"  {q1_b::select::30代}>３０代</option>
            <option value="40代"  {q1_b::select::40代}>４０代</option>
            <option value="50代"  {q1_b::select::50代}>５０代</option>
            <option value="60代"  {q1_b::select::60代}>６０代</option>
            <option value="70代"  {q1_b::select::70代}>７０代</option>
            <option value="80代以上"  {q1_b::select::80代以上}>８０代以上</option>
          </select>
          

</div> </form>

■JS

<script language="javascript" type="text/javascript"> $(function(){ $(".on").addClass('hide'); $(".parent").change(function(){ $(".on").slideUp(); $('#' + $(".parent option:selected").attr("class")).slideDown(); }); }) </script>

Answer 1

男性が選択された場合はid=bのセレクトを表示、女性が選択された場合は、id=cのセレクトボックスを表示、というふうにしたいのでしたら、jQuery.Eventとshow/hideを組み合わせて、こんな感じでどうでしょう？

$(function(){

  $("#b").hide();
  $("#c").hide();

  $(".parent").change(function(changed) {

    switch ($(changed.target).val()) {
      case "男性":
        $("#b").show();
        $("#c").hide();
        break;
      case "女性":
        $("#b").hide();
        $("#c").show();
        break;
    }

  });

});

参考URL:
jQuery.Event - jQuery 日本語リファレンス