js 给前端select赋值

最新推荐文章于 2024-07-15 03:14:56 发布

原创最新推荐文章于 2024-07-15 03:14:56 发布 · 1.8w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html 同时被 2 个专栏收录

4 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成下拉选择框的方法，通过遍历小时和分钟的列表，创建并添加option元素到select下拉框中，适用于各种时间选择场景。

 var hourslist = [
                "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"
            ];
        var secondlist = ["00", "30"];
            for (var i = 0; i < hourslist.length; i++) {
                //先创建好select里面的option元素
                var option = document.createElement("option");
                //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                $(option).val(hourslist[i]);
                //给option的text赋值,这就是你点开下拉框能够看到的东西
                $(option).text(hourslist[i]);
                //获取select 下拉框对象,并将option添加进select
                $('#Sel_hours1,#Sel_hours2').append(option);
            }
            for (var i = 0; i < secondlist.length; i++) {
                var option = document.createElement("option");
                $(option).val(secondlist[i]);
                $(option).text(secondlist[i]);
                $('#Sel_second1,#Sel_second2').append(option);
            }

    });