如何更新html-select而无需在php中重新加载页面

Question

我需要更新一个dropdwonlist而不重新加载页面，我的意思是，我有一个表单，可以在其中添加所需的元素，然后还有另一种表单，其中的dropdownlist已连接到数据库，但是如果我没有该元素，需要选择，我必须从其他表单中添加它，但是问题是我需要重新加载页面才能在dropdownlist中显示新元素，然后释放输入的数据。 我希望知道一种无需重新加载页面即可更新下拉列表的方法。 我使用php和mysqli我的代码很简单：

 <form action="edit_col_exe.php" method="post"> <p><label>Add Element:</label> <input autofocus type="text" name="elemnt" class="input" required /> </p> <table> <tr> <td><input type="submit" name="Save" value="Save" /></td> </tr> </table> </form> 

表格2：

选择元素查询（“按元素asc从元素顺序中选择*”）或die（“失败”）； 回显“选择一个选项”； while（$ reg = $ con-> fetch_assoc（））{echo“”; echo $ reg ['Element']; }？>

我希望有一个人可以帮助我！ 问候！

Answer 1

使用Ajax（我更喜欢jQuery）并删除您的表单。

JS

function addElement(){
  // get new name
  var name = $("#newElementsName").val();
  // create ajax call
  $.ajax({
    type: "POST",
    url: "edit_col_exe.php", // URL to php script
    data: { // post data for php script (I use the data from your form (including the typo))
      elemnt: name,
      save: 'Save'
    },
    success: function(data){
      // this function will be called when php script run successful (HTTP-Status 2xx)
      // Clear the input filed
      $("#newElementsName").val('');
      // Add new name to dropdown
      $("#elements").append("<option>"+name+"</option>");
    }
  });  

}

的HTML

<div>
  <p><label>Add Element:</label>
     <input autofocus type="text" id="newElementsName" class="input" required />
  </p>
  <table>
     <tr>
        <td><button type="button" onclick="addElement()">Save</button></td>
      </tr>
  </table>
</div>
<div>
  <select id="elements" size="1">
  </select>
</div>

Answer 2

我解决了我的问题，并想与您分享我的解决方案，它很简单：

setInterval(function(){
            $('#searchelement').load('addelements.php');
        });

 <p><label>Element</label> <select id="searchelement" name="element" required /> </option> </select></p> 

因此，每次我在'addelements.php'中添加元素时，都可以在选择列表中搜索新元素。