如何在不使用ajax刷新整个表单的情况下刷新表单中的下拉字段？

Question

有一个表单，其中一个字段是一个下拉字段，其中包含数据库中的项目名称。

有一个添加新项目的规定，通过点击“添加新”按钮，会出现一个弹出窗口，我们可以保存新项目。

虽然保存在数据库中，但在下拉字段中并没有体现出来，所以需要刷新。但是刷新整个页面会导致其他字段中输入的值丢失。

我的问题是，如何只刷新这个下拉字段而不刷新整个表单？

Answer 1

我遇到了同样的问题，但有一个通知框，所以我在它上面附加了一个事件，它通过点击它开始。此事件正在向 PHP 文件发送一些信息，并且 PHP 文件以来自数据库的通知进行响应。您也可以这样做，当用户单击下拉字段时，将使用 ajax 将请求发送到 PHP 文件以从数据库中获取信息，并且在用户添加项目并保存后，如果他在下拉菜单上单击以关闭它一个请求将被发送到数据库以获取所需的信息。或者您甚至可以将事件附加到显示“保存”或其他内容的按钮上，因此当他单击保存时，将发送请求并将响应附加到下拉菜单的内容中而无需重新加载。

我的代码如下： jQuery:-

// the event click is attached to the icon of the notification through its class 
$('.icon').click(function () {
//I used this line to make the hidden notification box slide down to show content
    $('#notifications-box').slideToggle(400);
//here the ajax request will be sent on the click
    $.ajax({
// The method of sending the data is POST because it is more seucre
        method: "POST",
//the File that you want to the send the data to 
        url: "get_notifications.php",
// The data that needs to be sent
        data: {
            //the name       : // the value 
            get_notifications: "true"
        },
// then on success the return will be appended to the notification box ( status is the respond )
        success: function (status) {
            $('.notifications-box').append(status);
        }
    });
});

然后你可以在php文件中使用isset()来知道数据是否是通过使用ajax请求发送到php文件的

//isset($_method(POST / GET)['您发送的名称在ajax请求中数据对象的大括号内'])

isset($_POST['get_notifications'])

Answer 2

要在 jQuery 的下拉框中添加新元素，请使用下面的代码，将元素 ID、a_value 和 a_text 替换为正确的信息（来自“添加新”按钮的输入信息）。

let dropdown = $('#dropdown');
dropdown.append($('<option></option>').attr('value', a_value).text(a_text));

或者：

$('#dropdown').append($('<option></option>').attr('value', a_value).text(a_name));