使用jQuery实现不同select选项决定div的显示和隐藏

一、准备工作

首先要在需要使用jQuery的页面引入需要的jquery库，建议从官网jquery.com下载

二、jquery实现div的显示与隐藏

1.html代码

<div>
    <label>选择显示与隐藏类别</label>
    <div >
        <select id="hideselect"  name="type" required>
            <option value="1">隐藏</option>
            <option value="2">显示</option>
            <option value="3">再次隐藏 </option>
        </select>
    </div>
</div>

<div id="hide">
    <div>
        <label>添加内容1</label>
        <div>
            <input type="text" name="content1" class="form-control" />
        </div>
    </div>

     <div>
        <label>添加内容1</label>
        <div>
            <input type="text" name="content1" class="form-control" />
        </div>
    </div>
</div>

2.jquery代码

<script language='javascript'>
    $(function(){
        $(document).ready(function(){
            $("#hideselect").change(function(){
                var hideselect = $(this).val();
                if(hideselect == 2){

    $("#hide").show().addClass("show");
                }else{
                    $("#hide").hide().removeClass("show");
                }
            })
        })
    });
</script>