select2动态渲染下拉框以及下拉数据格式化

最新推荐文章于 2025-10-08 01:22:57 发布

原创最新推荐文章于 2025-10-08 01:22:57 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#select2

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用jQuery和Ajax动态渲染下拉菜单的方法，通过从服务器获取人员信息并将其转换为下拉选项，同时展示了如何设置下拉框的样式和功能，如宽度、主题、占位符、语言等。

 //动态渲染下拉框
$('select[name="userid"]').html(getOption($userName, 'personname')).val('{$ITEM->relationuserid}').select2({
 width: '100%',
 theme: "bootstrap",
 placeholder: "请选择人员...",
 language: "zh-CN",
 templateResult: function(state){
     //console.log(state);
     if (!state.id) {
         return state.text;
     }
     var $state = $(
         '<span> ' + state.text + ' ('+ $(state.element).data('departname') +')</span>'
     );
     return $state;
 }
});

var $userName = [];
//获取离岗人员信息
function getUserId() {
     $.ajax({
         url: "__APP__/Mainten/Userinfoext/getListForCombobox",
         dataType: 'json',
         async: false,
         success: function (data) {
             $userName = data;
         }
     })
     return $userName
 }
 
function getOption(data, field) {
    var str = [];
    data.forEach(function (element) {
        str.push('<option value="' + element.id + '"  data-departname="'+ element.departname +'">' + element[field] + '</option>');
    });
    return str.join("");
}