我学了这么久，你告诉我循环添加选项是这么搞的？

最新推荐文章于 2022-03-24 16:04:02 发布

念天地之悠悠

最新推荐文章于 2022-03-24 16:04:02 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_44551909/article/details/92709481

博客介绍添加元素分为手动与自动添加，需依项目需求选择。重点阐述限定条件自动循环添加选项，以游乐场成人、儿童、婴儿下拉框为例，说明各下拉框添加规则，成人用for循环，儿童依成人改变，婴儿依儿童改变，最终实现成人+儿童+婴儿<10。

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

开发工具与关键技术：VisualStudio C#
作者：落白
撰写时间：2019/06/17

对于添加元素分为手动添加与有条件的自动添加。相对而言，手动添加的操作性更强，自动添加则更为准确和省力。但无论是手动添加还是自动添加都是开具体情况来使用的，主要开项目的需求。
下面要说介绍的是限定条件自动循环添加选项。举个例子，下面有三个下拉框，分别是成人、儿童、婴儿。而游乐场有限定，一个成人只能带一个儿童或者婴儿，儿童和婴儿不能单独买票。而且成人、儿童、婴儿加起来的数量不能大于9，大于9时就要购买团队票。接下来我们就需要根据这个限定条件来实现循环添加选项。
在这里插入图片描述
成人的下拉框选项直接用for循环来直接添加，因为它受到的约束条件只是小于9。儿童下拉框则根据成人下拉框的改变事件来添加，婴儿下拉框则根据儿童事件的改变事件来添加。最终实现的效果是成人+儿童+婴儿<10
在这里插入图片描述
功能代码：

//循环添加成人下拉框的选项
        for (var i = 1; i <=9; i++) {
$("#Select").append("<option onclick='AdultNumber(this)'>" + i + "</option>");
        }
        //成人下拉框改变事件
        $("#Select").change(function () {
            var AdultS = $("#Select").val();
            var Childerns = 9 - AdultS;
            $("#children").empty();
            //循环添加成人下拉框的选项
            for (var j = 0; j <= Childerns; j++) {
                $("#children").append("<option>" + j + "</option>");
            }
        });
        //儿童下拉框改变事件
        $("#children").change(function () {
            var AdultS = $("#Select").val();
            var Childrens = $("#children").val();
            var Babys = 9 - AdultS - Childrens;
            $("#baby").empty();
            //循环添加成人下拉框的选项
            for (var K = 0; K <= Babys; K++) {
                $("#baby").append("<option>" + K + "</option>");
            }
        });