zoukankan      html  css  js  c++  java
  • 实习日记)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>
  • 相关阅读:
    【C】C99与C89区别以及转换方法
    【bug】warning #13200: No emms instruction before return from function
    【linux/makefile】-D_REENTRANT编译选项的作用
    【arm】arm交叉编译工具链使用说明
    【Linux】linux中的strip命令
    【Linux】nm命令中符号类型详解
    【link】illegal text-relocation in IOS platform
    【link】IOS平台下汇编函数符号链接问题
    【ffmpeg】ffserver搭建流媒体服务
    【economic】程序员外包平台
  • 原文地址:https://www.cnblogs.com/wmxl/p/6777706.html
Copyright © 2011-2022 走看看