实习日记）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>