如何移除Select2下拉框的默认选中值或添加占位符

方法一：添加占位符并适配Select2 #

在加载业务选项前，先插入一个空值的占位符选项，再配合Select2的配置实现需求，同时保留required验证功能：

var selectElement = newRow.find("select"); 

// 插入占位符选项
var placeholderOption = $("<option>")
  .val("")
  .text("选择项目")
  .prop("disabled", true)
  .prop("selected", true);
selectElement.append(placeholderOption);

// 加载业务选项
dropdownOptions.forEach(function (option) {
  var optionElement = $("<option>").val(option.Value).text(option.Text);          
  selectElement.append(optionElement);
});

newRow.appendTo("#submissionTable");
// 配置Select2，启用占位符和可选的清空功能
selectElement.select2({ 
  width: "100%",
  placeholder: "选择项目",
  allowClear: true
});

方法二：仅移除默认选中状态 #

如果不需要占位符，只想取消第一项的默认选中，在加载完所有选项后将select的value设为空即可：

var selectElement = newRow.find("select"); 

dropdownOptions.forEach(function (option) {
  var optionElement = $("<option>").val(option.Value).text(option.Text);          
  selectElement.append(optionElement);
});

// 取消默认选中，设置值为空
selectElement.val("");

newRow.appendTo("#submissionTable");
selectElement.select2({ width: "100%" });

关键说明 #

• 由于你的select设置了required="required"，两种方法都能保证表单提交时用户必须选择有效选项。
• 方法一中的占位符设置disabled是为了防止用户选中它，确保只能选择业务选项。

内容的提问来源于stack exchange，提问作者Dev Beginner