如何避免自動選擇選擇標簽中的最后一個選項？

Question

我正在嘗試在 select 標簽內創建一個動態選項列表，該列表在單擊時刷新，而無需重新加載整個頁面。 此代碼有效，但單擊時會發生奇怪的事情。

<select id="select_choose" onclick="my_function">
    <option selected>Default value</option>
    <?php 
        $sql = "SELECT cols1,cols2 FROM my_table";
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $result = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
        foreach($result as $key => $value) {
            echo "<option>" . $key . "</option>";
        }
    ?>
</select>

<script>
    function my_function() {
      $("#select_choose").load(location.href + " #select_choose>*", "");  
    }
</script>

特別是，單擊“默認值”時會自動替換為插入到 MySQL 表中的最后一個值，即創建的最后一個選項值。 我怎樣才能避免這種行為？ 單擊時，我希望“默認值”不被最后一個值替換。 它必須保持原樣，以及下面列出的其他選項。

更新

Twisty 的解決方案解決了問題，但又出現了新問題。 當我單擊生成的其他選項時，“選擇”始終返回“默認值”。 其他選項不可選。

第二次更新

我解決了用“鼠標懸停”改變“點擊”的問題。

Answer 1

我懷疑這與使用.load() 。 考慮另一種方法。 我建議將 JS 和 PHP 分開。 制作一個獨立的 PHP 腳本，可以像 API 一樣基於 GET 進行查找。 然后使用JS通過AJAX查詢數據。

PHP

<?php 
// Connect to DB
$slt = "SELECT cols1,cols2 FROM my_table";
$stmt = $db->prepare($slt);
$stmt->execute();
$strD = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
$results = array();
foreach($strD as $key => $value) {
   array_push($results, $key);
}
// Close DB Connection
header('Content-Type: application/json');
echo json_encode($results);
?>

HTML

<select id="select_choose">
  <option>Default Value</option>
</select>

JavaScript

function loadOptions(url, sObj){
  $("option", sObj).not(":eq(0)").remove();
  $.getJSON(url, function(results){
    $.each(results, function(i, k){
      $("<option>").html(k).appendTo(sObj);
    });
  });
}

$("#select_choose").on("click", function(e){
  e.preventDefault();
  loadOptions("get_options.php", $(this));
  return true;
});

loadOptions("get_options.php", $("#select_choose"));

這將加載選項，並且無論何時單擊select元素，它都會再次加載它們，刪除除第一個選項之外的所有先前option元素，默認值。

更新

您可能需要從單擊事件中排除<option>元素以確保它們不會被替換。

$("#select_choose").not("option").on("click", function(e){
  e.preventDefault();
  loadOptions("get_options.php", $(this));
  return true;
});

如果您需要更多幫助，可能需要更好的代碼/HTML 示例。