Question

有一种形式，其字段之一是带有来自数据库的项目名称的下拉字段。

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

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

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

Answer 1

要将新元素添加到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));

Answer 2

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

我的代码如下： jQuery：-

<div *ngFor="let tab of tabs" [@choiceTab]="'choice'" (click)="viewState = 'choice'"
        class="card-tabs">
        <span [ngClass]="viewState === 'choice' ? 'text-primary' : ''"></span>
      </div>

然后您可以使用php文件中的// 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); } }); });来确定数据是否通过以下方式从ajax请求发送到php文件中：

// isset（$ _ method（POST / GET）['您发送的名称位于ajax请求中数据对象大括号内']）

isset()

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

2 个答案: