如何在jQuery Ajax中获取dselect动态下拉框的选中值？

AI 小北

2026-8-20

解决dselect插件设置选中值失效的问题

直接操作原生<select>的val()方法无法同步dselect的UI状态，因为这个插件是基于原生select生成独立的美化界面，需要触发插件的更新逻辑才能同步选中状态。

解决方案一：调用插件内置更新函数

在AJAX的success回调里，找到对应值的下拉选项按钮，手动调用dselectUpdate函数同步UI：

success: function(data) {
  // 处理分类下拉框
  const categoryVal = data.stock_category;
  // 先设置原生select的值，确保表单提交能拿到正确数据
  $('#stock_category').val(categoryVal);
  // 找到对应值的下拉选项按钮
  const categoryItem = $('#stock_category').next('.dselect-wrapper').find(`.dropdown-item[data-dselect-value="${categoryVal}"]`);
  // 调用插件更新函数同步UI
  if(categoryItem.length) {
    dselectUpdate(categoryItem[0], 'dselect-wrapper', 'form-select');
  }

  // 处理物品下拉框（逻辑一致）
  const itemVal = data.stock_item;
  $('#stock_item').val(itemVal);
  const itemItem = $('#stock_item').next('.dselect-wrapper').find(`.dropdown-item[data-dselect-value="${itemVal}"]`);
  if(itemItem.length) {
    dselectUpdate(itemItem[0], 'dselect-wrapper', 'form-select');
  }

  // 原有业务代码
  $('#modal_title').text('Edit Stock Out');
  $('#action').val('Edit');
  $('#submit_button').val('Edit');
  $('#stockOutModal').modal('show');
  $('#hidden_id').val(stock_id);
}

解决方案二：触发原生select的change事件

如果dselect插件监听了原生select的change事件，可直接触发事件实现自动同步：

success: function(data) {
  $('#stock_category').val(data.stock_category).trigger('change');
  $('#stock_item').val(data.stock_item).trigger('change');

  // 原有业务代码
  $('#modal_title').text('Edit Stock Out');
  $('#action').val('Edit');
  $('#submit_button').val('Edit');
  $('#stockOutModal').modal('show');
  $('#hidden_id').val(stock_id);
}