jQuery自定义select下拉框（二）提示信息的显示隐藏

最新推荐文章于 2022-10-11 10:49:25 发布

安静一会儿

最新推荐文章于 2022-10-11 10:49:25 发布

阅读量2.9k

点赞数

分类专栏： jQuery select 文章标签： jQuery hide() show()

本文链接：https://blog.csdn.net/weixin_44924173/article/details/89944185

版权

jQuery 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

select

2 篇文章 0 订阅

订阅专栏

需求
当用户选择或者输入错误信息时显示提示信息

初始化加载的页面
在这里插入图片描述
没有选择称谓

没有填写姓名

输入正确

代码
html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <link href="./css/selector.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="content">
        <div class="group">
            <div class="groupName">*称谓：</div>
            <div class="groupValue" id="selector">
                <div id="selected">
                    <span id="sex"></span>
                    <div id="arrowBotton"><img src="./images/arrow_bot.png"></div>
                </div>
                <ul class="ul">
                    <li value="default">请选择</li>
                    <li value="sir">先生</li>
                    <li value="lady">女士</li>
                </ul>
            </div>
            <div id="sexWarning" class="warning">请选择称谓</div>
        </div>
        <div class="group">
            <div class="groupName">*姓名：</div>
            <div class="groupValue">
                <input id="name" type="text">
            </div>
            <div id="nameWarning" class="warning">请填写姓名</div>
        </div>
    </div>
    <script src="./js/lib/jquery-1.8.2.min.js"></script>
    <script src="./js/selector.js"></script>
</body>

</html>

(function ($) {
    $(document).ready(function () {
     
        $("#sex").text("请选择")
        $("#sexWarning").hide();
        $("#nameWarning").hide();
    });

    $("#selected").click(function () {
        $(".ul").toggle();
        var flag = ($("#sex").text() == "请选择");
        isHide(flag, "#sexWarning");
    });
    $("#selector, .ul").mouseleave(function () {
        $(".ul").hide();
    });
    $(".ul li").click(function () {
        $("#sex").html($(this).html())
            .attr("value", $(this).attr("value"));
        $(".ul").css("display", "none");
        var flag = ($("#sex").text() == "请选择");
        isHide(flag, "#sexWarning");
    })
    $("#name").blur(function () {
        var flag;
        var s = $("#name").val();
        if(s == null || s == "" || s == undefined){
            flag=true
        };
        isHide(flag, "#nameWarning");
    });
    function isHide(flag, hideEle) {
        if (flag) {
            $(hideEle).show();
        } else {
            $(hideEle).hide();
        }

    }

})(jQuery)

css


.content{
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.group{
    width: 90%;
}
.ul{
    display: none;
    list-style: none;
    margin: -2px 0 0;
    padding: 5px 0;
    border: 1px solid #313b94;
    border-top: 0;
    width: 100%;
}
.ul li{
    display: block;
    padding: 2px 5px;
    color: #000;
    text-decoration: none;
}
.ul li:hover{
    background-color: rgba(243, 229, 229, 0.678);
    color: #000;
}
#selected{
    display: -webkit-flex;
    justify-content: space-between;
}
#selected, input{
    position: relative;
    height: 30px;
    line-height: 30px;
    border: 1px solid #313b94;
    width: 100%;
}
#arrowBotton{
    border-left:1px solid #313b94;
    margin-right: 1px;
}
#arrowBotton>img{
    height: 100%;;
}
.groupName, .groupValue, .warning{
    margin: 5px 0;
}
.warning{
    color: brown;
    background-color: oldlace;
}

安静一会儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery自定义select下拉框（二）提示信息的显示隐藏

需求当用户选择或者输入错误信息时显示提示信息初始化加载的页面没有选择称谓没有填写姓名输入正确代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>selector</title> ...
复制链接

扫一扫