Flask问题：如何让下拉框首个选项填充文本框

下拉框的change事件仅在选中项发生变化时触发。当动态生成选项后，第一个选项会被浏览器默认设为选中状态，此时点击第一个选项，选中状态没有改变，change事件不会执行，导致文本框无法被填充。

方案1：添加空默认选项 #

在生成下拉选项前插入一个空占位选项，让第一个真实城市选项不会默认选中，点击时就能触发change事件。修改AJAX成功回调代码：

success: function(response) {
  var suggestions = response.suggestions;
  // 先添加空选项
  var options = '<option value="">请选择城市</option>';
  options += suggestions.map(function(city) {
    return '<option value="' + city + '">' + city + '</option>';
  }).join('');
  $('#citySelect').html(options);
  $('#citySelect').show();
}

同时在change事件里跳过空选项的处理：

$('#citySelect').change(function() {
  var selectedCity = $(this).val();
  if (selectedCity) { // 跳过空选项
    $('#cityInput').val(selectedCity);
    $('#citySelect').hide();
  }
});

方案2：绑定click事件到选项 #

直接给每个下拉选项绑定click事件，不管是否为默认选中，点击就填充文本框。修改AJAX成功回调和事件绑定：

success: function(response) {
  var suggestions = response.suggestions;
  var options = suggestions.map(function(city) {
    return '<option value="' + city + '">' + city + '</option>';
  }).join('');
  $('#citySelect').html(options).show();
  // 给所有选项绑定click事件
  $('#citySelect option').click(function() {
    var selectedCity = $(this).val();
    $('#cityInput').val(selectedCity);
    $('#citySelect').hide();
  });
}
// 保留原change事件兼容键盘操作
$('#citySelect').change(function() {
  var selectedCity = $(this).val();
  $('#cityInput').val(selectedCity);
  $('#citySelect').hide();
});

方案3：强制重置选中状态 #

生成选项后主动将下拉框选中状态设为未选中，点击第一个选项时会触发change事件：

success: function(response) {
  var suggestions = response.suggestions;
  var options = suggestions.map(function(city) {
    return '<option value="' + city + '">' + city + '</option>';
  }).join('');
  $('#citySelect').html(options).show().prop('selectedIndex', -1);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Suggest Cities</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#cityInput').on('input', function() {
          var searchTerm = $(this).val();
          if (searchTerm.length >= 2) {
            $.ajax({
              url: '/suggest_cities',
              type: 'POST',
              data: {searchTerm: searchTerm},
              success: function(response) {
                var suggestions = response.suggestions;
                var options = '<option value="">请选择城市</option>';
                options += suggestions.map(function(city) {
                  return '<option value="' + city + '">' + city + '</option>';
                }).join('');
                $('#citySelect').html(options);
                $('#citySelect').show();
              },
              error: function(xhr) {
                console.log(xhr.responseText);
              }
            });
          } else {
            $('#citySelect').empty();
            $('#citySelect').hide();
          }
        });
        $('#citySelect').change(function() {
          var selectedCity = $(this).val();
          if (selectedCity) {
            $('#cityInput').val(selectedCity);
            $('#citySelect').hide();
          }
        });
        $('#cityForm').submit(function(e) {
          e.preventDefault();
          var cityInput = $('#cityInput').val();
          var cityOptions = $('#citySelect option').map(function() { return $(this).val(); }).get();
          if (cityOptions.includes(cityInput)) {
            alert('You selected ' + cityInput + '!');
          } else {
            alert('Please select a city from the drop-down menu.');
          }
        });
      });
    </script>
  </head>
  <body>
    <form id="cityForm">
      <label for="cityInput">Enter a city:</label>
      <input type="text" id="cityInput" name="cityInput">
      <select id="citySelect" style="display: none;"></select>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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