html中如何使用多重select控制层的显示和隐藏

y2t45 2011-07-21 01:21:43

首先有一个select id="s1" 下拉列为：“你好”，“不好”，“好吗”。
select id="s2"，s2的下拉列为“好”，“还好”，“一般”

下面有5个层
当s1的值是“你好”时，
div1显示，div2隐藏，div3（s2）隐藏，div4隐藏，div5隐藏；
当s1的值是“不好”时，
div2显示，div1隐藏，div3（s2）隐藏，div4隐藏，div5隐藏；
当s1的值是“好吗”时，
div3（s2）显示。
当div3（s2）的值是“好”时，div4显示，其他层隐藏；
当div3（s2）的值是“还好”时，div5显示，其他层隐藏；
当div3（s2）的值是“一般”时，div4，div5显示，其他层隐藏；
如何实现？

...全文

295 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

y2t45 2011-07-21

打赏
举报

可以不用JQuery吗？
我不懂

lsw645645645 2011-07-21

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#contentBox div').hide()//初始都隐藏

            var s1 = [1, 2, 3]; //控制哪个div显示

            var s2 = [4, 5, [4, 5]]//控制哪个div显示



            //显示DIV

            var showDiv = function (showId) {

                if (typeof showId == 'object') {//如果是数组（显示多个）

                    for (var i in showId) {

                        $('#contentBox div').eq(showId[i] - 1).show('slow');

                    }

                } else {

                    $('#contentBox div').eq(showId - 1).show('slow');

                }

            }



            //Change事件

            $('#s1,#s2').change(function () {

                var id = $(this).attr('id');

                var key = $(this).val();

                if (id == 's1' && key != '') {

                    $('#contentBox div').hide('slow');//所有都隐藏

                    var showId = s1[key - 1]; //显示哪个,s1中指定

                    showDiv(showId);

                }

                else {

                    $().add('#box4').add('#box5').hide('slow');//隐藏div4,div5

                    var showId = s2[key - 1];//显示哪个,s2中指定

                    showDiv(showId);

                }

            });

        });

        

    </script>

    <style type="text/css">

        .box

        {

            border:1px solid #ccc;

            height:60px;

            width:120px;

            background:#eee;

            margin:5px;

            float:left;

            color:#666;

            font-size:18px;

            font-weight:bold;

            text-align:center;

            line-height:60px;

           

        }

    </style>

</head>

<body>

<select id="s1">

<option value="">请选择</option>

<option value="1">你好</option>

<option value="2">不好</option>

<option value="3">好吗</option>

</select>



<select id="s2">

<option value="">请选择</option>

<option value="1">好</option>

<option value="2">还好</option>

<option value="3">一般</option>

</select>

<div id="contentBox">

<div class="box"  id="box1">1</div>

<div class="box"  id="box2">2</div>

<div class="box"  id="box3">3</div>

<div class="box"  id="box4">4</div>

<div class="box"  id="box5">5</div>

</div>



</body>

</html>

lsw645645645 2011-07-21

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#contentBox div').hide()//初始都隐藏
var s1 = [1, 2, 3]; //控制哪个div显示
var s2 = [4, 5, [4, 5]]//控制哪个div显示

//显示DIV
var showDiv = function (showId) {
if (typeof showId == 'object') {//如果是数组（显示多个）
for (var i in showId) {
$('#contentBox div').eq(showId[i] - 1).show('slow');
}
} else {
$('#contentBox div').eq(showId - 1).show('slow');
}
}

//Change事件
$('#s1,#s2').change(function () {
var id = $(this).attr('id');
var key = $(this).val();
if (id == 's1' && key != '') {
$('#contentBox div').hide('slow');//所有都隐藏
var showId = s1[key - 1]; //显示哪个,s1中指定
showDiv(showId);
}
else {
$().add('#box4').add('#box5').hide('slow');//隐藏div4,div5
var showId = s2[key - 1];//显示哪个,s2中指定
showDiv(showId);
}
});
});

</script>
<style type="text/css">
.box
{
border:1px solid #ccc;
height:60px;
width:120px;
background:#eee;
margin:5px;
float:left;
color:#666;
font-size:18px;
font-weight:bold;
text-align:center;
line-height:60px;

}
</style>
</head>
<body>
<select id="s1">
<option value="">请选择</option>
<option value="1">你好</option>
<option value="2">不好</option>
<option value="3">好吗</option>
</select>

<select id="s2">
<option value="">请选择</option>
<option value="1">好</option>
<option value="2">还好</option>
<option value="3">一般</option>
</select>
<div id="contentBox">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
<div class="box" id="box5">5</div>
</div>

</body>
</html>

科易网基于40亿+科创知识图谱数据库，深度探索AI技术在技术转移、成果转化、技术经纪、知识产权、产业创新、科技招商等垂直领域的多样化应用场景，研究科技创新领域的AI+数智化解决方案，推动科技创新与产业创新智能化发展。

科技中介服务机构在服务企业时，如何利用产业大脑实现供需精准对接与资源高效匹配？

MATLAB实现的分数边际伪似然方法，用于学习高斯图模型的依赖结构.rar

内容概要：本文提出一种基于鱼鹰优化算法（OOA）优化的CNN-BiGUR-Attention混合模型，用于提升短期风电功率预测的精度与稳定性，采用Matlab实现代码仿真。该模型融合卷积神经网络（CNN）提取输入数据的局部空间特征，利用双向门控循环单元（BiGUR）捕捉风速、功率等时间序列的前后向动态依赖关系，并引入注意力机制自适应强化关键时间步的特征权重，从而增强模型对非平稳风电数据的表征能力；进一步，采用OOA算法对模型超参数进行全局寻优，有效提升模型收敛速度与泛化性能。研究基于实际风电场历史数据开展实验验证，结果表明，该方法相较传统模型在预测精度、鲁棒性和误差抑制方面表现更优，适用于高比例可再生能源接入背景下的电力系统调度需求。; 适合人群：从事新能源发电预测、电力系统优化调度、智能算法与深度学习融合应用等方向的科研人员及工程技术人员，尤其适合具备Matlab编程能力、熟悉时间序列建模与深度学习框架的研究者。; 使用场景及目标：①实现风电场短期功率高精度预测，支撑电网安全稳定调度与能量管理；②为深度学习模型结构设计与智能优化算法联合调参提供实践范例；③推动人工智能技术在可再生能源预测、智能电网运行等领域的落地应用。; 阅读建议：建议结合提供的Matlab代码深入理解CNN-BiGUR-Attention网络架构搭建、注意力机制实现方式及OOA优化流程，重点关注数据预处理、模型训练与参数调优细节，可通过替换不同风电数据集进行对比实验，进一步掌握模型迁移能力与适应性。