javascript - 将选定/保存的值(来自数据库)设置/显示到选择框以进行编辑

Question

我正在尝试获取已保存到数据库的值并将其显示在选择框中。 选择框中的项目是从数据库中填充的。

<select id="sel2" name="sel2">
    <option value="">---</option>
    <?php 
        require("connection.php");

        $res = mysqli_query($conn, "SELECT field FROM table");
        while($row = $res->fetch_assoc()){
            echo "<option value='".$row['field']."'>'".$row['field']."'</option>";
        }
    ?>
</select>

现在，当我尝试这样做时，

$('#btn2').click(function(){
    var x = "field1";
    $('#sel2').val(x);
});

x 的值不会出现在选择框中。但是当项目没有从数据库中获取时，例如，

<select id="sel2" name="sel2">
    <option value="">---</option>
    <option value="field1">field1</option>
    <option value="field2">field2</option>
    <option value="field3">field3</option>
</select>

jquery 可以工作。

我不知道我在这里错过了什么。你能帮我解决这个问题吗？当从数据库填充项目时，如何设置选择框的选定值(来自之前选择的数据库)？

我正在从数据库中获取选择框的项目，因为它们太多了。请帮忙。

Answer 1

问题在于 jquery 代码是在从数据库获取字段之前执行的。因此，语句 $('#sel2').val(x); 无法设置值 x，因为此时 x > 选择下拉列表中不存在该字段。

如果不确定，请尝试在 jquery click 函数中使用超时来检查我所说的是否正确。

让我知道它是否有效。