jQuery实现下列表（jQuery事件，下拉列表，checkbox选中个数限制等）_使用jquery,完成下列功能,期望工作地区-CSDN博客

本文展示了如何使用jQuery实现职位名称、行业选择下拉菜单，学历双选，以及通过点击事件动态显示期望工作地区并管理城市选项，同时限制选中数量并提供清空和确认功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery下列表

成果要求
代码展示

成果要求

在这里插入图片描述
这是成果要求，页面美化本人能力有限，只实现了其中功能，本人实现成果如下：

页面比较丑，但是所有功能基本全部实现，主要功能如下：

职位名称、所在行业：下拉选框
学历：两个下拉选框
期望工作地区：点击出现下部带有背景颜色部分
下部多项checkbox：选中后内容显示再下面已选城市文本框内，且限制选中个数为10个
清空：点击清空已选城市内容并取消已经选中的checkbox
确定：点击使得下部已选城市内容显示再上方期望工作地区文本框内

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script>

        $(function (){
            var positions=["普通员工","组长","小老板","大老板"];
            var industrys=["前端","后端","测试"];
            var educations=["专科","本科","硕士"];
            var degrees=["博士","博士后","无"];
            var nowlocations=["黑龙江","吉林","辽宁"];

            //职位名称下拉选框
            for (var i=0;i<positions.length;i++){
                var divpos=$("<option>");
                divpos.append(positions[i]);
                $("#position").append(divpos);
            }

            //所在行业下拉选框
            for (var i=0;i<industrys.length;i++){
                var divind=$("<option>");
                divind.append(industrys[i]);
                $("#industry").append(divind);
            }

            //学历下拉选框
            for (var i=0;i<educations.length;i++){
                var divedu=$("<option>");
                divedu.append(educations[i]);
                $("#education").append(divedu);
            }

            //学位下拉选框
            for (var i=0;i<degrees.length;i++){
                var divdeg=$("<option>");
                divdeg.append(degrees[i]);
                $("#degree").append(divdeg);
            }

            //现居住地下拉选框
            for (var i=0;i<nowlocations.length;i++){
                var divnow=$("<option>");
                divnow.append(nowlocations[i]);
                $("#nowlocation").append(divnow);
            }

            //期望地区点击事件（点击出现下部选项）
            $("#hopelocation").click(function (){
                $("#location").show();
            })

            //下部checkbox选中显示事件
            $(":checkbox").click(function (){
                var c=[];
                $(":checked[name='checkbox'] ").each(function (){
                    c.push($(this).val());
                })

                $("#citychecked").val(c.join("+"));

                //限制选中个数最多未10个，超过10个无法选中并弹出警告
                if ($(":checked[name='checkbox']").length>10){
                    alert("最多只能选择10个");
                    return false;
                }


            })

            //下部清空按钮事件（清空已选城市内容）
            $("#clean").click(function (){
                $("#citychecked").val("");

                $(":checked[name='checkbox'] ").each(function (){
                    $(":checked[name='checkbox']").prop("checked",false);
                })

            })

            //下部确定按钮事件（点击确定，将已选城市内容显示在上面期望工作地区文本框中并且关闭下部选项栏）
            $("#enter").click(function (){
                $("#hopelocation").val($("#citychecked").val());
                $("#location").hide();
            })


        })

    </script>
</head>
<body>
<div align="center">
    关键词<input type="text" /> <br>
    <input type="checkbox"/>包含任一关键词 <br>
    公司名称：<input type="text" placeholder="请输入公司名称关键词"/> <br>
    <input type="checkbox"/>只搜最近一份工作<br>
    <hr style="height:5px;border:none;border-top:2px dotted"><br>
    职位名称 <select id="position" style="width: 200px;">  </select>  <br>
    所在行业<select id="industry"  style="width: 200px;">  </select>   <br>
    更新日期<input type="date" id="newtime" style="width: 200px" /><br>
    学历<select id="education" style="width: 100px">

</select>- <select id="degree" style="width: 100px">

</select><br>
    现居住地<select id="nowlocation" style="width: 200px">

</select><br>
    期望工作地区<input type="text" id="hopelocation"> <br>
    年龄<input type="number" id="age"><br>
    专业名称<input type="text" placeholder="多个专业可用空格分隔"><br>
    性别 <input type="radio"  class="sex" name="sex" checked/>不限  <input type="radio" class="sex" name="sex">男  <input type="radio" class="sex" name="sex">女  <br>


    <div id="location" style="width: 600px;background-color: beige;display: none"  >
        <hr style="height:5px;border:none;border-top:2px dotted"><br>
        期望工作地区：最多添加10个<br>
        <hr style="height:5px;border:none;border-top:2px dotted"><br>
        主要城市<br>
        <input type="checkbox" value="北京" name="checkbox">北京<input type="checkbox" value="上海" name="checkbox">上海<input type="checkbox" value="广州" name="checkbox">广州<input type="checkbox" value="深圳" name="checkbox">深圳<input type="checkbox" value="天津" name="checkbox">天津<input type="checkbox" value="武汉" name="checkbox">武汉<input type="checkbox" value="西安" name="checkbox">西安 <br>
        <input type="checkbox" value="成都" name="checkbox">成都<input type="checkbox" value="大连" name="checkbox">大连<input type="checkbox" value="长春" name="checkbox">长春<input type="checkbox" value="沈阳" name="checkbox">沈阳<input type="checkbox" value="南京" name="checkbox">南京<input type="checkbox" value="济南" name="checkbox">济南<input type="checkbox" value="青岛" name="checkbox">青岛 <br>
        <input type="checkbox" value="杭州" name="checkbox">杭州<input type="checkbox" value="苏州" name="checkbox">苏州<input type="checkbox" value="无锡" name="checkbox">无锡<input type="checkbox" value="宁波" name="checkbox">宁波<input type="checkbox" value="重庆" name="checkbox">重庆<input type="checkbox" value="郑州" name="checkbox">郑州<input type="checkbox" value="长沙" name="checkbox">长沙 <br>
        <input type="checkbox" value="福州" name="checkbox">福州<input type="checkbox" value="厦门" name="checkbox">厦门<input type="checkbox" value="哈尔滨" name="checkbox">哈尔滨<input type="checkbox" value="石家庄" name="checkbox">石家庄<input type="checkbox" value="合肥" name="checkbox">合肥<input type="checkbox" value="惠州" name="checkbox">惠州<input type="checkbox" value="太原" name="checkbox">太原 <br>
        <input type="checkbox" value="昆明" name="checkbox">昆明<input type="checkbox" value="烟台" name="checkbox">烟台<input type="checkbox" value="佛山" name="checkbox">佛山<input type="checkbox" value="南昌" name="checkbox">南昌<input type="checkbox" value="贵阳" name="checkbox">贵阳 <br>
        省市<br>
        <input type="checkbox" value="广东" name="checkbox">广东<input type="checkbox" value="湖北" name="checkbox">湖北<input type="checkbox" value="陕西" name="checkbox">陕西<input type="checkbox" value="四川" name="checkbox">四川<input type="checkbox" value="辽宁" name="checkbox">辽宁<input type="checkbox" value="吉林" name="checkbox">吉林<input type="checkbox" value="江苏" name="checkbox">江苏 <br>
        <input type="checkbox" value="山东" name="checkbox">山东<input type="checkbox" value="浙江" name="checkbox">浙江<input type="checkbox" value="广西" name="checkbox">广西<input type="checkbox" value="安徽" name="checkbox">安徽<input type="checkbox" value="河北" name="checkbox">河北<input type="checkbox" value="山西" name="checkbox">山西<input type="checkbox" value="内蒙古" name="checkbox">内蒙古 <br>
        <input type="checkbox" value="黑龙江" name="checkbox">黑龙江<input type="checkbox" value="福建" name="checkbox">福建<input type="checkbox" value="江西" name="checkbox">江西<input type="checkbox" value="河南" name="checkbox">河南<input type="checkbox" value="湖南" name="checkbox">湖南<input type="checkbox" value="海南" name="checkbox">海南<input type="checkbox" value="贵州" name="checkbox">贵州 <br>
        <input type="checkbox" value="云南" name="checkbox">云南<input type="checkbox" value="西藏" name="checkbox">西藏<input type="checkbox" value="甘肃" name="checkbox">甘肃<input type="checkbox" value="青海" name="checkbox">青海<input type="checkbox" value="宁夏" name="checkbox">宁夏<input type="checkbox" value="新疆" name="checkbox">新疆<input type="checkbox" value="香港" name="checkbox">香港 <br>
        <input type="checkbox" value="澳门" name="checkbox">澳门<input type="checkbox" value="台湾省" name="checkbox">台湾省<br>
        <br>
        <br>
        已选城市：<input type="text" id="citychecked"> <input type="button" value="清空" id="clean"><br>
        <br>
        <input type="button" value="确定" style="background-color: bisque" id="enter">


    </div>


</div>


</body>
</html>