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

Posted 2021-05-04

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

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

虽然它保存在数据库中，但它没有反映在下拉字段中，因此我们需要刷新。但是刷新整个页面会导致丢失在其他字段中输入的值。

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

答案

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

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));

另一答案

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

我的代码如下：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'])