在表单中捕获 optgroup 标签答案

【问题标题】：Catch optgroup label in form在表单中捕获 optgroup 标签
【发布时间】：2013-08-16 16:47:56
【问题描述】：

我的 HTML：

    <select name="field" required="true">
  <option value="">Choose ITEM</option>
    <optgroup label="ITEMGROUP 1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
      <option value="item4">item4</option>
      <option value="item5">item5</option>
      <option value="item6">item6</option>
      <option value="item7">item7</option>
    </optgroup>
   </select>

现在我想获取所选项目的值：

$item = $_POST['field'];

如果我想获取 optgroup 标签，我该怎么办？谢谢！

【问题讨论】：

请查看forums.phpfreaks.com/topic/… 和stackoverflow.com/questions/8908658/…，如果您有任何问题，请告诉我。

标签： php html

【解决方案1】：

optgroups 仅用于客户端演示。

但是，如果您有一个 LOGIC 来生成组，您还应该能够使用相同的逻辑再次将 Value 转换为适当的组，但相反。

edit：您也可以将组作为值的前缀传递。

类似

     <select name="field" required="true">
  <option value="">Choose ITEM</option>
    <optgroup label="ITEMGROUP 1">
      <option value="ITEMGROUP 1;item1">item1</option>
      <option value="ITEMGROUP 1;item2">item2</option>
      <option value="ITEMGROUP 1;item3">item3</option>
      <option value="ITEMGROUP 1;item4">item4</option>
      <option value="ITEMGROUP 1;item5">item5</option>
      <option value="ITEMGROUP 1;item6">item6</option>
      <option value="ITEMGROUP 1;item7">item7</option>
    </optgroup>
   </select>

然后使用简单的explode() 语句获取组信息。

【讨论】：

【解决方案2】：

我试图做同样的事情，但事情变得复杂，所以我选择了不同的解决方案：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form>
  <input id="hidden" name="hidden" type="hidden" value=""/>
  <select id="field" name="field" required="true">
    <option value="">Choose ITEM</option>
    <optgroup label="ITEMGROUP 1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
      <option value="item4">item4</option>
      <option value="item5">item5</option>
      <option value="item6">item6</option>
      <option value="item7">item7</option>
    </optgroup>
   </select>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function(){
  $("#field").change(function(){
    var s = $(this).find(":selected").closest("optgroup");
    $("#hidden").val($(s).attr("label"));
    alert($(s).attr("label"));
  })
});
</script>
</body>
</html>

【讨论】：