JavaScript+PHP提交表单时select选项值为空问题排查

我仔细看了你的代码，发现问题出在JavaScript获取下拉选项值的方式上——这就是为什么邮件里Service Type是空的，其他字段却正常的原因。

错误所在 #

在contact_me.js里，你是这样获取服务类型值的：

var service = $("option#service").val();

这个选择器option#service是在找id为service的option标签，但你的HTML里只有<select>标签的id是service，所有<option>都没有这个id，所以这行代码根本拿不到选中的值，传递给PHP的service自然是空的。

修复方法 #

把这行代码改成直接通过select的id来获取值就可以了，jQuery的val()方法对select元素会自动返回选中选项的value：

var service = $("#service").val();

额外建议（可选） #

另外，你PHP里的空字段检查没包含service，如果想确保这个字段必须被提交，可以把empty($_POST['service'])加入到判断条件里：

if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['service']) || empty($_POST['message']) || !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL)) {
    echo "No arguments Provided!";
    return false;
}

这样修改后，再提交表单，邮件里的Service Type就会正常显示用户选中的选项啦。

内容的提问来源于stack exchange，提问作者mrmegatheman