当前位置: 首页 > Web开发 > HTML教程 >正文

Html:实现带复选框的下拉框(一)

来源:互联网时间:2020-12-14 21:44:26编辑:网友分享
概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下。模拟所用元素:input,ul,li 代码 <!DOCTYPE html> <html> <head> <meta chars

概述

项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下。
模拟所用元素:input,ul,li

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模拟实现带复选框的下拉列表</title>
    <script type="text/javascript" src="jquery-3.5.1.js"></script>

    <style type="text/css">
        body{
            margin: 20px;
        }
        input{
            width: 150px;
            height: 30px;
        }
        ul{
            display: none;
            list-style: none;
            width: 150px;
            padding: 0;
            margin: 0;
        }
        li{
            height: 20px;
            font-size: 20px;
            margin-bottom: 5px;
        }
        input{
            font-size: 14px;
        }
        input[type="checkbox"]{
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin: 5px 5px 0 0;
            vertical-align: top;
        }
        #id_div{
            width: 150px;
        }
    </style>
</head>

<body>
    <div id="id_div">
        <input id="id_select" readonly onclick="show_options();">
        <ul id="id_select_options">
            <li><input type="checkbox" name="select_checkbox" onclick="chk_changed();" value="000000"/>000000</li>
            <li><input type="checkbox" name="select_checkbox" onclick="chk_changed();" value="111111"/>111111</li>
            <li><input type="checkbox" name="select_checkbox" onclick="chk_changed();" value="222222"/>222222</li>
            <li><input type="checkbox" name="select_checkbox" onclick="chk_changed();" value="333333"/>333333</li>
            <li><input type="checkbox" name="select_checkbox" onclick="chk_changed();" value="444444"/>444444</li>
        </ul>
    </div>

    <script type="text/javascript">
        //显示 - 隐藏下拉列表
        $("#id_div").mouseleave( function(){
            $("#id_select_options").hide();
        } );

        function show_options()
        {
            if( $("#id_select_options").is(":hidden") )
                $("#id_select_options").show();
            else
                $("#id_select_options").hide();
        }

        //复选框勾选,更新显示
        function chk_changed()
        {
            var str_selected = "";
            var lstChk = document.getElementsByName( "select_checkbox" );
            for( var n = 0; n < lstChk.length; n++ )
            {
                if( lstChk[n].checked )
                    str_selected = str_selected + "/" + lstChk[n].value;
            }
            $("#id_select").val( str_selected.substring( 1, str_selected.length ) );
        }
    </script>
</body>
</html>

效果

Html:实现带复选框的下拉框(一)

上一篇: Netbeans与基于libsass的SASS编

下一篇:TREND走向云:三维动画对网站设计

您可能感兴趣的文章

相关阅读