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>
  • 相关阅读:
    POI实现Excel导入数据库数据
    POI对Excel进行读取操作,工具类,便于操作数据
    HAProxy-1.8.20 根据后缀名转发到后端服务器
    Haproxy-1.8.20 编译安装:
    Soat控制HaProxy 动态增减服务器
    Haproxy-1.8.20 根据路径(URI)转发到后端不同集群
    Ansible User 模块添加单用户并ssh-key复制
    Ansible-playbook 安装redis
    二进制安装mysql-5.7.28
    编译安装 nginx -1.14.2
  • 原文地址:https://www.cnblogs.com/wmxl/p/6777706.html
Copyright © 2011-2022 走看看