无法设置 JavaScript 中的选定选项

Question

我在尝试从 javascript 设置 selected 选项时遇到问题。我创建了一个 select 并从 mysql 添加了带有 php 的选项，如下所示：

<select class="form-control input-group-lg" name="progress" id="progress">
<?php
  if ($conn === false) {
    die("ERROR: Could not connect. " . mysqli_connect_error());
  }

  $sql = "SELECT * FROM progress";
  if ($result = mysqli_query($conn, $sql)) {
    if (mysqli_num_rows($result) > 0) {
      while ($row = mysqli_fetch_array($result)) {
        $id = $row['id'];
        $progress_name = $row['name'];
        echo "<option>$progress_name</option>";
      }
    }
    else {
      echo "<option>Fault!</option>";
    }
  }
  else {
    echo "$sql. " . mysqli_error($conn);
  }
  mysqli_close($conn);
?>
</select>

然后像这样从 javascript 设置 selected 选项：

$('#progress').val("Value to set");

此方法工作正常，它使用我想要的值设置 selected 选项。

另一种方法：

我有 php 文件和 select 来自数据库 (MySQL) 的数据 json，然后像这样使用 ajax

$.ajax({
  url: 'data_control/orders/progress_select.php',
  type: 'get',
  method: "POST",
  data: {selected_value:selected_value},
  dataType: 'JSON',
  success: function (response) {
    var len = response.length;
    for (var i = 0; i < len; i++) {
      var progress_name = response[i].progress_name;
      var option = document.createElement("option");
      option.text = progress_name;
      option.value = progress_name;
      var select = document.getElementById('progress');
      select.appendChild(option);
    }
  }
});

选项添加成功，但是我不能这样设置select值：

$('#progress').val("Value to set");

感谢帮助！

Answer 1

不能设置成功以外的值

要么

var select = document.getElementById('progress');
for (var i = 0; i < len; i++) {
  var progress_name = response[i].progress_name;
  var option = document.createElement("option");
  option.text = progress_name;
  option.value = progress_name;
  select.appendChild(option);
}
select.value='Value to set'

或

var select = document.getElementById('progress');
for (var i = 0; i < len; i++) {
  var progress_name = response[i].progress_name;
  var option = document.createElement("option");
  option.text = progress_name;
  option.value = progress_name;
  if (progress_name==='Value to set') options.selected = true;
  select.appendChild(option);
}

更短的选择

document.getElementById('progress').innerHTML = response
 .map(({progress_name}) => `<option${progress_name === 'Value to set'?' selected' : ''} value="${progress_name}">${progress_name}</option>`)
 .join("")

无法设置 JavaScript 中的选定选项

Can't set selected option from JavaScript

html

javascript

php

mysql

ajax