selectboxと連動して表示内容を変える jqueryを使って

2016.10.09 Sunday 00:25
0
    selectboxと連動して表示内容を変える jqueryを使って


    <html>
    <head>
    <style type="text/css" title="currentStyle">
    </style>

    <script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#tr_type select[name="selectbox"]').change(function() {
    if ( $('select[name="selectbox"] option:selected').val() == 'select_type1') {
    $('#display_box1').css('display','block');
    $('#display_box2').css('display','none');
    $('#display_box3').css('display','none');
    $('#display_box4').css('display','none');
    } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type2') {
    $('#display_box1').css('display','none');
    $('#display_box2').css('display','block');
    $('#display_box3').css('display','none');
    $('#display_box4').css('display','none');
    } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type3') {
    $('#display_box1').css('display','none');
    $('#display_box2').css('display','none');
    $('#display_box3').css('display','block');
    $('#display_box4').css('display','none');
    } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type4') {
    $('#display_box1').css('display','none');
    $('#display_box2').css('display','none');
    $('#display_box3').css('display','none');
    $('#display_box4').css('display','block');
    } else {
    $('#display_box1').css('display','none');
    $('#display_box2').css('display','none');
    $('#display_box3').css('display','none');
    $('#display_box4').css('display','none');
    }
    });
    });
    </script>


    </head>
    <body>


    <table>
    <tr id="tr_type">
    <th>タイプ</th>
    <td>
    <select name="selectbox">
    <option value="select_type1">本1
    <option value="select_type2">本2
    <option value="select_type3">本3
    <option value="select_type4">本4
    </select>
    </td>
    </tr>
    </table>

    <div id="display_box1">
    内容1
    </div>
    <div id="display_box2" style="display: none;">
    内容2
    </div>

    <div id="display_box3" style="display: none;">
    内容3
    </div>

    <div id="display_box4" style="display: none;">
    内容4
    </div>

    </body>
    </html>

    category:javascript | by:ittoocomments(0)trackbacks(0) | -

    スポンサーサイト

    2019.09.17 Tuesday 00:25
    0
      category:- | by:スポンサードリンク | - | - | -
      Comment








         
      Trackback
      この記事のトラックバックURL

      ad
      Calender
        12345
      6789101112
      13141516171819
      20212223242526
      2728293031  
      << October 2019 >>
      Selected entry
      PR
      Category
      Archives
      Recent comment
      • パス指定 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-4: truncated ¥xXX escape
        久米隆文
      • 円マークが自動変換されてる
        aaaaaa
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        66hills
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        ssd
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        max
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        DOM
      • コンピュータ業界の根本的な変化
        cloud
      • コンピュータ業界の根本的な変化
        Dellの仮想化
      • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
        えちごや
      Recent trackback
      • スマートフォンの法人活用例
        無線LANネットのブログ
      • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
        特選情報
      Recommend
      Link
      Profile
      Search
      Others
      Mobile
      qrcode
      Powered
      無料ブログ作成サービス JUGEM