select2选择框赋值

### 如何在 Select2 插件中设置默认值或动态赋值 #### 初始化 Select2 并设置默认值 为了实现 Select2 默认值的设置，可以通过 JavaScript 或 jQuery 来操作 DOM 元素并调用 Select2 方法完成。如果需要将某个特定 ID 或 Value 值设为默认选中项，则可以先更新原生 `<select>` 元素的内容再初始化 Select2。 以下是具体实现方式： 1. **静态设置默认值** 如果已知要设置的默认值（例如 `3`），可以直接修改原始 HTML 中的 `<option>` 属性，并将其标记为 `selected="selected"` 后重新触发 Select2 的渲染过程[^1]。 ```html <select id="example"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3" selected="selected">Option 3</option> <!-- Default --> <option value="4">Option 4</option> </select> <script> $(document).ready(function() { $('#example').select2(); }); </script> ``` 2. **动态设置默认值** 当默认值由服务器端传递而来时，可以在前端脚本中动态调整选项状态并通过 `.val()` 和 `.trigger('change')` 完成绑定[^2]。 ```javascript var defaultValue = '3'; // 动态获取，默认值可能来自后端接口 $(document).ready(function () { let $selectElement = $("#example"); // 添加新选项至 select 列表 (可选) $("<option>", {value: defaultValue, text: "Dynamic Option"}).appendTo($selectElement); // 设定当前选中值 $selectElement.val(defaultValue); $selectElement.trigger("change"); // 更新 UI 显示 // 初始化 Select2 组件 $selectElement.select2({ placeholder: "请选择", allowClear: true, }); }); ``` 3. **处理复杂场景下的默认值设定** 对于某些特殊需求，比如页面存在多个独立的 `<form:select>` 表单项且部分依赖后台参数决定是否显示预定义选项的情况，可以根据实际情况灵活组合逻辑判断来填充初始数据[^3]。 ```javascript function setDefaultValues(selectId, defaultOptions) { const $element = $("#" + selectId); $.each(defaultOptions, function(index, option){ if (!$(`#${selectId} option[value='${option.value}']`).length){ $('<option>',{ value : option.value, text : option.text }).appendTo($element); } }); $element.val(defaultOptions.map(o => o.value)).trigger('change'); } $(function(){ setDefaultValues('complexExample', [{value:'A',text:'Item A'}, {value:'B',text:'Item B'}]); $('#complexExample').select2({width: 'resolve'}); }) ``` 以上代码片段展示了不同条件下如何利用 Select2 实现默认值配置以及动态加载功能。 --- ### 注意事项 - 在执行任何更改之前，请确认目标元素已被正确选择并且未被其他插件干扰。 - 使用 `placeholder` 参数可以让用户体验更佳，在无有效条目匹配时提供提示信息。 - 若涉及大量异步请求的数据源同步问题，建议结合 AJAX 技术优化交互流程[^4]。