如何仅获取Select2下拉框选中option对应的文本内容

• 直接调用$('#productList').text()会读取<select>标签下所有<option>的文本内容，所以会返回全部选项的文本，不是选中项的内容
• 代码开头多余初始化了一次Select2，后续在document ready中又重新初始化属于重复操作，可删除

方法1：直接获取当前选中项文本 #

使用jQuery原生的选中项选择器：

// 单选场景下直接获取选中项文本
let selectedText = $('#productList').find('option:selected').text();
console.log(selectedText);

也可以用Select2封装的API获取：

// select2('data')返回选中项的数组，单选场景取下标0的元素即可
let selectedText = $('#productList').select2('data')[0].text;
console.log(selectedText);

方法2：监听选中变化实时获取 #

如果需要在用户切换选项时拿到最新选中内容，绑定change事件即可：

$('#productList').on('change', function () {
  let selectedText = $(this).find('option:selected').text();
  let selectedId = $(this).val();
  console.log('选中的ID：', selectedId, '选中的文本：', selectedText);
});

$(document).ready(function(){
  let data = [{"reference":'BC-ENFANT',"name":'Pour les Enfants',"description":'Soins pour les enfants...',"id":155,"productList":[{"id":13655,"reference":'PROD_ENFANT_01',"name":'Brushing'},{"id":13656,"reference":'PROD_ENFANT_03',"name":'Soins'},]},{"reference":'BC-FEMME',"name":'Pour les Femmes',"description":'Prestations pour les femmes',"id":154,"productList":[{"id":13657,"reference":'PROD_ENFANT_01',"name":'Brushing'},{"id":13658,"reference":'PROD_ENFANT_03',"name":'Soins'}]}];

  let results = data.map(group => ({
    text: group.name,
    children: group.productList.map(product => ({
      id: product.id,
      text: product.name
    }))
  }));
  $('#productList').select2({
    multiple: false,
    data: results,
    minimumResultsForSearch: -1,
  });
  // 打印默认选中项的文本
  console.log($('#productList').find('option:selected').text());

  // 可选：绑定切换事件实时获取
  $('#productList').on('change', function () {
    console.log('当前选中文本：', $(this).find('option:selected').text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<label>Prestation</label>
<select id="productList"></select>

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