如何更新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>

​

Form2：

Select Element query("select * from Elements order by Element asc")或die("fail")；echo“选择一个选项”；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‘添加一个元素时，我可以在选择列表中搜索新的元素。