封装一个Array 数据绑定 html select 方法

最新推荐文章于 2025-06-23 09:36:44 发布

原创最新推荐文章于 2025-06-23 09:36:44 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select #javascript #jquery

JavaScript 同时被 2 个专栏收录

49 篇文章

订阅专栏

Jquery

9 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的函数，用于将数据绑定到HTML的select控件中，包括添加选择提示信息，适用于前端开发场景。

/**
* 
* @param {} select select控件         
* @param {} nodes Array数据
* @param {} value value绑定项
* @param {} text text绑定项
* @param {} prompt 选择提示信息
* @returns {} 
*/
function bindSelect(select, nodes, value, text, prompt) {
    select.empty();
    if (prompt) {
        select.append($('<option/>', {
            value: '',
            text: prompt,
            selected: 'selected'
        }));
    }
    if (nodes && nodes.length > 0) {
        nodes.forEach((item) => {
            select.append($('<option/>', {
                value: item[value],
                text: item[text]
            }));
        });
    }
}

eg：

var ddlSubject = $("#ddlSubject");
/*绑定学科列表*/
GetSubjectList((ref) => {
    if (ref) {
        const subList = eval(ref.value).filter((sub) => sub.IsShow === "1");
        bindSelect(ddlSubject, subList, "subId", "subName", "请选择学科");
    }
});

ps：需要引入Jquery