Как обновить раскрывающееся поле в форме, не обновляя всю форму с помощью ajax?

Question

Существует форма, одним из полей которой является раскрывающееся поле с именами элементов из базы данных.

Существует условие для добавления нового элемента, нажав кнопку «Добавить новый», появится всплывающее окно, и мы можем сохранить новый элемент.

Несмотря на то, что он сохраняется в базе данных, он не отражается в раскрывающемся поле, поэтому нам нужно обновить. Но обновление всей страницы приводит к потере значений, введенных в других полях.

Мой вопрос: как обновить только это раскрывающееся поле, не обновляя всю форму?

Answer 1

У меня была такая же проблема, но с окном уведомлений, поэтому я прикрепил к нему событие, которое начинается с нажатия на него. Это событие отправляло некоторую информацию в файл 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);
        }
    });
});

и затем вы можете использовать isset() в файле php, чтобы узнать, были ли данные отправлены в файл php из запроса ajax с помощью

// isset (метод $ _ (POST / GET) ['имя, которое вы отправили в фигурных скобках объекта данных в запросе ajax'])

isset($_POST['get_notifications'])

Answer 2

Чтобы добавить новый элемент в раскрывающийся список в jQuery, используйте приведенный ниже код, заменив идентификатор элемента, 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));