首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

根据选择显示隐藏div不起作用jquery Php

根据选择显示隐藏div不起作用的问题,可能是由于以下几个原因导致的:

  1. jQuery库未正确引入:首先需要确保在HTML文件中正确引入了jQuery库。可以通过在<head>标签内添加以下代码来引入最新版本的jQuery库:
代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  1. jQuery代码未正确编写:在编写jQuery代码时,需要确保语法正确且逻辑正确。以下是一个简单的示例,用于根据选择显示或隐藏一个div:
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <select id="mySelect">
        <option value="show">显示</option>
        <option value="hide">隐藏</option>
    </select>
    
    <div id="myDiv" style="display: none;">这是要显示或隐藏的div。</div>
    
    <script>
        $(document).ready(function(){
            $("#mySelect").change(function(){
                var selectedOption = $(this).val();
                if(selectedOption == "show"){
                    $("#myDiv").show();
                } else if(selectedOption == "hide"){
                    $("#myDiv").hide();
                }
            });
        });
    </script>
</body>
</html>

在上述示例中,通过监听select元素的change事件,根据选择的选项值来显示或隐藏div元素。

  1. PHP代码与jQuery代码的交互问题:如果你的问题涉及到了PHP代码与jQuery代码的交互,需要确保PHP代码正确获取到了选择的值,并将其传递给jQuery代码进行处理。以下是一个简单的示例,用于演示PHP与jQuery的交互:
代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <form method="post" action="">
        <select id="mySelect" name="mySelect">
            <option value="show">显示</option>
            <option value="hide">隐藏</option>
        </select>
        <input type="submit" value="提交">
    </form>
    
    <div id="myDiv" style="display: none;">这是要显示或隐藏的div。</div>
    
    <script>
        $(document).ready(function(){
            <?php
            if(isset($_POST['mySelect'])){
                $selectedOption = $_POST['mySelect'];
                if($selectedOption == "show"){
                    echo "$('#myDiv').show();";
                } else if($selectedOption == "hide"){
                    echo "$('#myDiv').hide();";
                }
            }
            ?>
        });
    </script>
</body>
</html>

在上述示例中,通过在PHP代码中获取表单提交的选择值,并根据该值生成相应的jQuery代码来显示或隐藏div元素。

总结: 以上是针对根据选择显示隐藏div不起作用的问题的一些可能原因和解决方法。如果问题仍然存在,请检查代码中是否存在其他错误或冲突,并确保代码逻辑正确。另外,如果你需要了解更多关于云计算、IT互联网领域的名词和概念,以及腾讯云相关产品和介绍,可以参考腾讯云官方文档和网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 原生js与jQuery显示隐藏div的几种方法

    原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...div的显示和隐藏,但是隐藏后页面显示空白,功能也消失。...从性能角度分析:第一种方式性能更高,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

    10200

    jQuery,和嵌入其中的Ajax

    jQuery 选择器 jQuery选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML元素。...它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。 jQuery中所有选择器都以美元符号开头:$()。 元素选择器 jQuery元素选择器基于元素名选取元素。... 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的div> 元素中: 实例 $("#div1").load("demo_test.txt"); 也可以把 jQuery 选择器添加到...如果load() 方法已成功,则显示"外部内容加载成功!"...,而如果失败,则显示错误消息: 实例 $("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,

    3.1K20

    前端架构师之01_JQuery

    jQuery选择器的基本语法:$(选择器)。 根据选择器获取方式的不同大致可以将其分为以下几类。...:target")将获取div id="foo">元素 2.2.4 内容选择器 根据元素的内容完成指定元素的获取。...2.2.6 属性选择器 根据元素的属性获取指定元素的方式。如获取class值为current的div>元素等。...隐藏显示的匹配元素 基本特效 toggle([speed],[easing],[ fn]) 元素显示与隐藏切换 滑动特效 slideDown([speed],[easing],[ fn]) 垂直滑动显示匹配元素...设置焦点图的外边框的宽度以及超出隐藏,限定其只能显示一张图片。 切换到下一张时,只需要修改焦点图外层样式中的left值,就可以将焦点图整体向左移动,从而显示第2张图片。

    6800

    WordPress 添加个性化的博客宠物(汉纸篇)

    二、加载jQuery库 请确定你的主题有没有加载加载jQuery库,如果没有,请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题...三、HTML 在主题的footer.php 文件下(一般是前)加入以下代码: div id="spig" class="spig"> div id="message">加载中…...…div> div id="mumu" class="mumu">div> div> 四、JS 在添加js 文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的"替换...php if((($display_name = wp_get_current_user()->display_name) !...正常的话应该是可以显示宠物的啦,如果不行,先用开发者工具查看哪里出问题了(路径错误?js冲突?);如果再不行,留言请教~

    1.4K50

    JQuery 入门学习(一)

    这快一个礼拜了在家里,不停地在前端和php上花忙。收获可以说颇丰,Jquery、ajax、css、php基本上现在用的还比较熟悉了。...在Jquery中,DOM变得更加简单。 选择器     要操作html文档,就用到选择器。     举个很简单的例子,$("div#exm") 选择了id为exm的div元素。...隐藏和显示和动画效果     Jquery自带了一些动画效果,通过一些参数就能显示出来。...我也只是改了一句话:$("div#exm").hide('slow'); 将id=exm的div元素隐藏,并且是慢慢隐藏,因为有'slow'参数。    ...hide方法就是隐藏一个元素所有内容的方法。它有一个参数,表示隐藏的快慢。     当然有hide方法就有show方法,用法一样。还有一个方法toggle,表示在隐藏和显示中切换。

    1.6K11

    jQuery 教程

    为hidden的元素 $("li:visible") //匹配所有可见元素 :hidden选择所有隐藏的元素,如:$("div:hidden").show(3000)); :visible选择所有隐藏的元素...特效效果 :jQuery 效果 – 隐藏和显示 | 菜鸟教程 – 隐藏和显示 – 淡入淡出 – 滑动 – 动画 – 停止动画 – Callback 方法 – 链(Chaining) jQuery 效果方法...finish() 对被选元素停止、移除并完成所有排队动画 hide() 隐藏被选元素 queue() 显示被选元素的排队函数 show() 显示被选元素 slideDown() 通过调整高度来滑动显示被选元素...jQuery 遍历,意为”移动”,用于根据其相对于其他元素的关系来”查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。 下图展示了一个家族树。...实例解析 jQuery 隐藏/显示 jQuery hide() 演示 jQuery hide() 方法。

    17K20

    WordPress 添加个性化的博客宠物(妹纸篇)

    二、加载jQuery库 请确定你的主题有没有加载加载jQuery库,如果没有,请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题...三、HTML 在主题的footer.php 文件下(一般是前)加入以下代码: div id="spig" class="spig"> div id="message">加载中…...…div> div id="mumu" class="mumu">div> div> 四、JS 在添加js 文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的"替换...php if((($display_name = wp_get_current_user()->display_name) !...正常的话应该是可以显示宠物的啦,如果不行,先用开发者工具查看哪里出问题了(路径错误?js冲突?);如果再不行,留言请教~

    1.5K50

    大型项目技术栈第七讲 Chosen的使用

    Chosen的使用 Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。...disable_search false 设置为 true 隐藏单选框的搜索框 disable_search_threshold 0 少于 n 项时隐藏搜索框 enable_split_word_search...Chosen 生成的选择框宽度,默认为和原 select 宽度保持一致 display_disabled_options true 是否显示禁止选择的项目 display_selected_options...true 多选框是否在下拉列表中显示已经选中的项 3、select组件属性 组件关键属性就4个如下: data-placeholder:空白点位符,显示默认值 multiple:多选择框属性,如...chosen:close 关闭 Chosen 并隐藏搜索结果 6、取值,初始化选中项,数据渲染 上面介绍了chosen所以的配置,属性,事件,有没有发现问题,chosen渲染不是单独提供数据源,然后根据数据源渲染下拉框的

    4.2K40

    jQuery基础图文系列

    用于选取首字母 ::before 在被选元素的内容前面插入内容 ::after 在被选元素的内容后面插入内容 ::selection 应用于文档中被用户高亮的部分 jQuery中的基本选择器:id选择器...常用的函数: .get() 获取指定的dom元素 .index() 返回指定元素相对于其他指定元素的index位置 .size() 返回被jQuery选择器匹配的元素的数量 .toArray() 以数组的形式返回...hide() 和 show()隐藏和显示 HTML 元素 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(...$("p").remove();//删除所有p标签 查找元素 $("p").find("span")//查找p标签下的span标签 显示隐藏的匹配元素 $("p").show();//显示p标签 隐藏显示的元素...,成功之后提示Data Saved:加some.php输出的内容

    4.5K10

    jquery校验规则的使用

    --[endif]--> 默认校验规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php...可以自定义错误提示的样式 errorElement:String Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector 显示或者隐藏验证信息...,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer...wrapper:String 用什么标签再把上边的errorELement包起来 一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏 errorContainer...: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li" 设置错误提示的样式,可以增加图标显示

    5K30

    JQuery学习—JQuery-Validation 使用

    (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件...可以自定义错误提示的样式 errorElement:String Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector 显示或者隐藏验证信息...,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer...wrapper:String 用什么标签再把上边的errorELement包起来 一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏 errorContainer:..."div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li" 设置错误提示的样式,可以增加图标显示 input.error

    4.6K20

    Spimes模板添加打赏按钮,实现对打赏区域自由开启关闭

    其实我以为只是个小修改吧,因为没啥难度啊,就是jQuery的隐藏显示方法,但是结果这几个月来问的人一大堆,看来还是写个教程稳妥点。...>div> 这块地方的整个代码就成如下这样了: div class="read_outer"> php _e( '封面' ); ?...>div> div class="read_outer"> php _e( '阅读' ); ?>div> div class="read_outer Reward"> php _e( '打赏' ); ?>div> 然后在模版的设置中,找到自定义CSS,写入如下代码,将打赏区域默认隐藏,并且打赏按钮变成红色: .btn_reward{display:none !...important;} 最后,添加支持打赏显示和隐藏的js,可以加在post.php靠底部的合适位置(我这里使用了原生js,主要是可能不是所有的模板都用了jquery,那么原生js还是最稳妥的办法):

    69920

    jQuery 快速入门教程

    不过我们需要根据jQuery对象来筛选指定的元素。...$("selector").show(); // 显示隐藏的元素,默认不带过渡动画效果 $("selector").show( 400 ); // 显示隐藏的元素,带有400毫秒的过渡动画效果 $("selector...").show( "fast" ); // 显示隐藏的元素,带有200毫秒的过渡动画效果 $("selector").show( "slow" ); // 显示隐藏的元素,带有600毫秒的过渡动画效果...$("selector").hide(); // 隐藏显示的元素,其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏,隐藏就显示),其用法与.../隐藏的元素,带有向上/下滑动的过渡动画效果 $("selector").fadeIn(); // 显示隐藏的元素,带有淡入的过渡动画效果 $("selector").fadeOut(); // 隐藏显示的元素

    13.7K30
    领券