boostrap 中的下拉选selectpicker 和easyui中的下拉选combobox,动态给下拉选赋值

本文介绍了如何在Bootstrap的selectpicker和EasyUI的combobox下拉选择框中动态赋值。使用AJAX进行数据查询，成功后通过遍历数据将值填充到select元素中，并设置默认选中项。对于Bootstrap的selectpicker，调用'val', 'refresh'和'render'方法完成更新；而对于EasyUI的combobox，设置数据源、valueField、textField和初始值。" 107974376,9851461,rsync错误排查指南,"['命令行工具', '数据同步', '文件管理']

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

1.boostrap 中的下拉选 selectpicker

2.easyui中的下拉选 combobox

//查询
   $.ajax({
       type : "post",//请求方式
       url : root + '/ ',//后台请求url地址
       async : false,//异步请求
       dataType : "json",//返回的数据格式
       error : function() {
           alert("查询失败！请稍后操作！");
       },
       success:function(data){

// 这是给boostrap中的下拉选赋值
           var Arr = [];//数组
           for(var i = 0; i < data.length; i++) {
               //获取下拉选所有的值动态赋值,往下拉框塞值
$('#address').append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
//下拉选设置默认选中所有值
Arr.push(data[i].Id);//所有的地址id
           }
           //角色获取select框中所有选中的值
           //给多选selectpicker赋值，Arr是数组
       $('#address').selectpicker('val', Arr);
           //refresh方法更新UI以匹配新状态。
           //在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。
   $('#address').selectpicker('refresh');
   //render方法强制重新渲染引导程序 - 选择ui。
   //以编程方式更改影响元素布局的任何基础值，这非常有用。
   $('#address').selectpicker('render');

//这个是给easyui的combobox下拉选赋值
           $("#addre").combobox({//往下拉框塞值
               data : data,
               valueField : "id",//value值
               textField : "name",//文本值
               panelHeight : 280
           });
           if (data) {
               //初始化页面展示的,默认选择第一个
               $('#addre').combobox('setValue',data[0].id);
           }
       }
   });