JavaScript onClick添加带有下拉菜单的表单字段我需要填充PHP MySQL查询

JavaScript onClick添加带有下拉菜单的表单字段，同时需要填充PHP MySQL查询。

首先，我们需要在HTML中创建一个表单，并添加一个按钮，当点击按钮时触发JavaScript函数。在JavaScript函数中，我们可以使用DOM操作来动态添加表单字段和下拉菜单选项。然后，我们可以使用AJAX技术将表单数据发送到后端的PHP文件进行MySQL查询。

以下是一个示例代码：

HTML部分：

<form id="myForm">
  <input type="text" name="name" placeholder="姓名">
  <button type="button" onclick="addFormField()">添加字段</button>
  <div id="formFields"></div>
  <button type="button" onclick="submitForm()">提交</button>
</form>

JavaScript部分：

function addFormField() {
  var formFieldsDiv = document.getElementById("formFields");
  
  var newField = document.createElement("div");
  newField.innerHTML = `
    <input type="text" name="field[]" placeholder="字段名">
    <select name="dropdown[]">
      <option value="选项1">选项1</option>
      <option value="选项2">选项2</option>
      <option value="选项3">选项3</option>
    </select>
  `;
  
  formFieldsDiv.appendChild(newField);
}

function submitForm() {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process.php", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理响应数据
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
}

PHP部分（process.php）：

<?php
// 连接MySQL数据库
$servername = "数据库服务器地址";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 获取表单数据
$name = $_POST['name'];
$fields = $_POST['field'];
$dropdowns = $_POST['dropdown'];

// 执行MySQL查询
$sql = "INSERT INTO 表名 (name, field, dropdown) VALUES ('$name', '$fields[0]', '$dropdowns[0]')";
for ($i = 1; $i < count($fields); $i++) {
  $sql .= ", ('$name', '$fields[$i]', '$dropdowns[$i]')";
}

if ($conn->query($sql) === TRUE) {
  echo "数据插入成功";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

在这个示例中，我们使用JavaScript的DOM操作动态添加表单字段和下拉菜单选项。当点击"添加字段"按钮时，会在<div id="formFields">中添加一个新的字段。当点击"提交"按钮时，会将表单数据使用AJAX技术发送到后端的PHP文件进行MySQL查询。PHP文件中，我们首先连接到MySQL数据库，然后获取表单数据，并执行插入操作。

请注意，示例中的数据库连接信息、表名等需要根据实际情况进行修改。

推荐的腾讯云相关产品和产品介绍链接地址：