select与option：实现表单对应显示和对应显隐

最新推荐文章于 2023-02-24 19:54:40 发布

cypakoo

最新推荐文章于 2023-02-24 19:54:40 发布

阅读量1k

点赞数

分类专栏： Web开发文章标签： function generator javascript asp.net html div

本文链接：https://blog.csdn.net/cypakoo/article/details/7190341

版权

Web开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、表单对应显示

部分效果图：

代码实现：定义方法，通过if判断语句分项显示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>表单对应显示</title>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
     <script type="text/javascript" language="javascript">
         $(function(){

             $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
             $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
         });


         var eDropLangChange = function(){

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


            $("#dropFrame").children("span").each(function(){
                $(this).children().clone().replaceAll($(this));
            });


            if(parseInt(selectedValue) != 0){

                $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
                     $(this).wrap("<span style='display:none'></span>");
                });
             }
       };


        var eDropFrameChange = function(){

             $("#dropLang").val($(this).children("option:selected").attr("parentid"));
         };
     </script>
</head>
<body>
     <div>
         <select id="dropLang">
            <option selected="selected" value="0"><请选择></option>
             <option value="1">Javascript</option>
             <option value="2">Java</option>
             <option value="3">C#</option>
         </select>
         <select id="dropFrame">
             <option selected="selected" value="0"><请选择></option>
             <option value="1" parentid="1">JQuery</option>
             <option value="2" parentid="1">Prototype</option>
             <option value="3" parentid="2">Struts</option>
             <option value="4" parentid="2">Spring</option>
             <option value="5" parentid="2">Velocity</option>
             <option value="6" parentid="2">Hibernate</option>
             <option value="7" parentid="3">ASP.NET MVC</option>
             <option value="8" parentid="3">Castle</option>
        </select>
    </div>
</body>
</html>

二、表单对应显隐

部分效果图：

代码实现：定义对应获取id，判断value值，再显隐
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="majianan">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var sname = [];
sname.push('s1');
sname.push('s2');
sname.push('s3');
sname.push('s4');
function setselect(obj){
    var flag = false;
    for(var i=0;i<sname.length;i++){
        if(sname[i]==obj){
            if(document.getElementById(sname[i]).value==3 || document.getElementById(sname[i]).value==4){
                flag = true;
            }
        }else{
            continue;
        }
    }

    if(flag){
        for(var i=0;i<sname.length;i++){
            if(sname[i]==obj) continue;
            else{
                document.getElementById(sname[i]).disabled = true;
            }
        }
    }else{
        for(var i=0;i<sname.length;i++){
            document.getElementById(sname[i]).disabled = false;
        }
    }
}
</script>
</HEAD>

<BODY>
<SELECT id='s1' onChange="setselect(this.id);">
    <option value='1'>自考</option>
    <option value='2'>成考</option>
    <option value='3'>四级英语</option>
    <option value='4'>计算机等级</option>
</SELECT>
<SELECT id='s2' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
</SELECT>
    <SELECT id='s3' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
</SELECT>
    <SELECT id='s4' onChange="setselect(this.id);">
    <option value='1'>op1</option>
    <option value='2'>op2</option>
    <option value='3'>op3</option>
    <option value='4'>op4</option>
</SELECT>
</BODY>
</HTML>

cypakoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
select与option：实现表单对应显示和对应显隐

一、表单对应显示部分效果图：代码实现：定义方法，通过if判断语句分项显示表单对应显示 $(function(){ $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropL
复制链接

扫一扫