Semantic UI Dropdown表单提交后PHP $_REQUEST为空问题排查

我使用Semantic UI的下拉组件构建了一个表单，但提交后PHP的$_REQUEST变量为空。以下是我的代码（已简化）：

HTML与JS代码 #

<head> 
<!-- jQuery --> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
<!-- Semantic UI --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css" /> 
</head> 
<body> 
<form class="ui large form" action="post.php" method="post"> 
<div class="one field"> 
<label for="profession">Profession</label> 
<select name="profession" class="ui search dropdown" id="profession"></select> 
</div> 
<button type="submit" class="ui fluid large teal submit button">Submit</button> 
</form> 
<script>
$(function() { 
  var professions = [{"name":"Altenpflegehelfer","value":"3"},{"name":"Altenpfleger","value":"4"},{"name":"Änderungsschneider","value":"2"},{"name":"Anlagenmechaniker","value":"5"},{"name":"Anlagenmechaniker für Sanitär-, Heizungs- und Klimatechnik (früher: Zentralheizungs- und Lüftungsbauer)","value":"6"},{"name":"Asphaltbauer","value":"7"}]; 
  $('#profession').dropdown({ 
    values: professions, 
    fullTextSearch: true, 
  }); 
}); 
</script> 
</body>

测试方式 #

创建post.php文件，内容如下：

<?php echo var_dump($_REQUEST); ?>

提交表单后，$_REQUEST为空，请问哪里操作有误？

问题原因与解决办法 #

嘿，这个问题我之前也碰到过！核心原因是Semantic UI的下拉组件会隐藏原生的<select>元素，生成自定义的视觉DOM，但默认不会把选中的值同步回原生<select>——这就导致表单提交时，这个字段根本没被包含在提交数据里，所以PHP的$_REQUEST自然是空的。

给你两种靠谱的解决方式：

方式1：用组件配置自动同步（推荐） #

修改下拉组件的初始化代码，加上forceSelection和selectOnKeydown这两个配置项，让组件自动把选中值同步到原生<select>：

$('#profession').dropdown({ 
  values: professions, 
  fullTextSearch: true,
  forceSelection: true, // 强制选择下拉列表内的选项，避免自定义输入
  selectOnKeydown: true // 键盘选择时自动同步到原生select
}); 

方式2：手动监听事件同步 #

如果需要更灵活的控制（比如允许自定义输入后处理），可以监听下拉的change事件，手动把选中值赋值给原生<select>：

$('#profession').dropdown({ 
  values: professions, 
  fullTextSearch: true,
  onChange: function(selectedValue, selectedText) {
    // 把选中的值同步到原生select元素
    $('#profession').val(selectedValue);
  }
}); 

额外检查点 #

最后再帮你排查几个常见坑：

• 你的<select>已经有正确的name="profession"属性，这部分没问题
• 打开浏览器控制台看看有没有JS报错，比如jQuery或Semantic UI加载失败的情况
• 提交前可以在控制台执行console.log($('form').serialize())，看看序列化后的表单数据里有没有profession字段，确认同步是否生效

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