如何使用AJAX返回的数据自动选中select下拉框的对应option

你现在的代码无法生效的核心原因是<select>元素没有设置id="kondisi"，导致jQuery选择器$('#kondisi')无法定位到对应的下拉框元素，按以下步骤修改即可实现需求：

1. 给下拉框补充id属性 #

修改你的select代码，添加id字段：

<select class="form-select" aria-label="select-kondisi" id="kondisi">
 <option selected>Kondisi</option>
 <option value="baik">Baik</option>
 <option value="rusak">Rusak</option>
</select>

2. （可选）优化AJAX赋值逻辑 #

如果返回的data.kondisi可能存在前后空格等问题，可以调整success回调的代码提高兼容性：

$.ajax(
 {
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  url: '/databarang/getubah',
  data: {id_barang : id_barang},
  method: 'post',
  dataType: 'json',
  success: function(data){
    // 去除返回值两端空白字符，避免空格导致匹配失败
    const targetValue = data.kondisi.trim();
    $('#kondisi').val(targetValue);
    // 兼容老版本jQuery的备选写法
    // $('#kondisi option[value="'+ targetValue +'"]').prop('selected', true);
  }
 });

jQuery的.val()方法作用在select元素上时，会自动匹配value相等的option并设置为选中状态，只要选择器能正确定位到下拉框、传入值和option的value属性完全匹配，就能实现自动选中效果。

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