實習日記）select option 選擇不同的option時， 頁面發生不同的變化

怎么在下拉框的選擇不同的option時， 頁面發生響應的變化

 

因為option是沒有點擊事件什么的，  只有select才有， 所以不能通過option的點擊事件來完成， 所以開始的嘗試都失敗了（之前不知道option沒有點擊事件

 

看到這篇之后http://blog.csdn.net/shingeven/article/details/7042822 根據它的源代碼稍加改造，終於完成了想要的效果

當點擊選擇題時 出現選項一欄， 並有4個input框

當點擊填空題時 隱藏選項一欄

當點擊判斷題時 出現選項一欄， 並有2個input框

 

html代碼

　　　　　　　　　　<tr id="xuanze">
                    <th width="120"><i class="require">*</i>選項：</th>
                    <td>
                        <input id="xx" type="text" class="lg" name="option1" value=""><br>
                        <input id="xx" type="text" class="lg" name="option2" value=""><br>
                        <input id="xx" type="text" class="lg" name="option3" value=""><br>
                        <input id="xx" type="text" class="lg" name="option4" value=""><br>
                    </td>
                </tr>
                <tr id="panduan" hidden="hidden">
                    <th width="120"><i class="require">*</i>選項：</th>
                    <td>
                        <input id="xx" type="text" class="lg" name="option_true" value="對"><br>
                        <input id="xx" type="text" class="lg" name="option_false" value="錯"><br>
                    </td>
                </tr>

js代碼

<script type="text/javascript">

        //這個方法用來當下拉框選擇到填空和判斷的時候隱藏選項一欄
        function hiddenXX(){
            var objS = document.getElementById("select"); //通過id獲得這個元素
            var value = objS.options[objS.selectedIndex].value; //獲得option中的值
            if(value == 1)  //如果是選擇 就顯示選擇一欄 隱藏判斷一欄
            {
                $("#xuanze").show();
                $("#panduan").hide();
            }
            else if(value == 3)  //如果是判斷 就隱藏選擇一欄 顯示判斷一欄
            {
                $("#xuanze").hide();
                $("#panduan").show();
            }
            else{ //如果是其他情況 都不顯示
                $("#xuanze").hide();
                $("#panduan").hide();
            }
        }
    </script>