1つの要素を表示して、それ以外非表示

取り急ぎ。

HTML

  <!-- 選択 -->
  <select id="select">
    <option value="">ー</option>
    <option value="1" id="value1">選択1</option>
    <option value="2" id="value2">選択2</option>
  </select>
  <!-- 開閉セットbox -->
  <div id="display">
    <div id="box1" style="display: none;"><p>選択1でここが表示</p></div>
    <div id="box2" style="display: none;"><p>選択2でここが表示</p></div>
  </div>

• display:none;はcssのclassやjsに書くと、display:none;が読み込まれるまでのタイムラグでちらっと表示されるのが嫌だったので、htmlに直書き。

JQuery

$(function(){
    /* selectボックスの選択が変更したら中の処理を実行 */
    $('#select').change(function(){
        /* 選択したselectボックスのvalue値を取得して、変数valに入れる */
        var val = $(this).val();
        /* 変数valの値ごとに、処理をswichでふりわけ */
        switch (val) {
            case '1':
                /* #box1を表示 */
                $('#box1').show();
                /* divのidに「box」を含むid名がついているもので、box1じゃないものは非表示 */
                $('div[id^="box"]:not("#box1")').hide();
            break;
            case '2':
                /* #box2を表示 */
                $('#box2').show();
                /* divのidに「box」を含むid名がついているもので、box2じゃないものは非表示 */
                $('div[id^="box"]:not("#box2")').hide();
            break;
            /* caseで設定した以外の処理 */
            default:
                /* divのidに「box」を含むid名がついているものは非表示 */
                $('div[id^="box"]').hide();
        }
    });
});

• value値について value値に入る値は「文字列」として入ってくる。 今回はvalue値を文字列の1,2で割り振っているので、文字列を示す為に、case '1' のようにシングルクオーテーションで囲いました。