使用 jquery 以编程方式选择 select2 选项

Posted 2023-05-07

【中文标题】使用 jquery 以编程方式选择 select2 选项

【英文标题】：programmatically select select2 options using jquery

【发布时间】：2016-09-12 07:42:48

【问题描述】：

我尝试了以下解决方案来选择列出的选项之一

<select data-placeholder="Company Name" class="select required form-control select2-hidden-accessible" name="company[company_name]" id="company_company_name" tabindex="-1" aria-hidden="true">
  <option value=""></option>
  <option value="ABC">ABC</option>
  <option value="XYZ Company">XYZ Company</option>
  <option value="PQR Company">PQR Company</option>
</select>

我试过了：

// Not working
$('#company_company_name').select2('val', 'XYZ Company');
// => undefined

// Not Working
$('#company_company_name').select2('val', 'XYZ Company', true);
// => undefined

// Not Working
$('#company_company_name').select2('data', id: 'XYZ Company');
// => undefined

// Not working
$('#company_company_name').select2('data', id: 'XYZ Company', a_key: 'XYZ Company');
// => undefined

另请注意下面的代码返回空数组：

$('#company_company_name').select2('data')
// => []

问题

如何使用 jquery 选择已经存在的 select2 选项？

更新

我也尝试选择值并触发更改，但随后 select2 坏了，我可以看到简单的选择字段

$('#company_company_name').val('XYZ Company').trigger('change');

【参考方案1】：

What events does Select2 listen for?

Select2 将侦听它所附加的更改事件。如果您进行任何需要反映在 Select2 中的外部更改（例如更改值），则应触发此事件。

$('#company_company_name').val('XYZ Company'); 

然后

$('#company_company_name').trigger('change'); 

或者

$('#company_company_name').trigger('change.select2');

【讨论】：

感谢 BenG，$('#company_company_name').trigger('change.select2'); 确实为我工作，但 .trigger('change'); 破坏了 select2 并且只显示选择字段