刷新后使用jquery在选择下拉列表中保持选择一个选项

Question

我有一个小脚本，可以重新加载包含聊天室中用户昵称的选择。当有人单击选择时，javascript 会刷新它，从 php 页面重新填充选项以添加已登录的人员并删除已注销的人员。 该脚本在重新加载选择时正常工作，但我希望它避免在用户再次单击选择以刷新列表时丢失先前选择的选项，并且脚本没有保留正确的选项。所有代码都可以正常工作，除了 jquery 的那部分。

JS（页面上当然还有jquery库）：

<script type="text/javascript">
  $(document).ready(function() {
    $("#Users").focusin(function() {
      var UsersSelect = $('#Users').val();
      $("#Users").load("users.php");
      $('select[name="Users"]').val(UsersSelect);
    });
  });
</script>

html/php网页：

<div id="UserList" name="UserList">
<select name="Users" id="Users">
<?
$queryprep = "select name FROM users";
$query = $PDO->prepare($queryprep);
$query->execute();
while($rs = $query->fetch()) {
    echo "<option value=".$rs['name'].">".$rs['name']."</option>";
}
$query = null;
?>
</select>
</div>

users.php 页面：

<select name="Users" id="Users">
<?
$queryprep = "select name FROM users";
$query = $PDO->prepare($queryprep);
$query->execute();
while($rs = $query->fetch()) {
    echo "<option value=".$rs['name'].">".$rs['name']."</option>";
}
$query = null;
?>
</select>

感谢您的回答。

Answer 1

AJAX 是异步的，因此您尝试在填充数据之前重置该值。一旦选项被替换，选择将再次失去价值

使用load() 的complete callback

$("#Users").focusin(function() {
    var $select=$(this),  UsersSelect = $select.val();
    $select.load("users.php", function(){
       /* new html exists now s we can set value*/
       $select.val(UsersSelect);
    });
})