dongyukang7006
2013-08-16 16:47 浏览 79
已采纳

在表单中捕获optgroup标签

my 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>

Now I want to grab the value of selected item :

$item = $_POST['field'];

What can I do if I want to grab the optgroup label ? Thanks !

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答 默认 最新

  • 已采纳
    dpdkqls6399 dpdkqls6399 2013-08-16 17:13

    optgroups are only used for client side presentation.

    However, if you have a LOGIC to generate the groups, you should also be able to turn the Value into the appropriate group again, using the very same logic, but reversed.

    edit: you could also pass the group as a prefix of the value.

    something like

         <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>
    

    and then use a simple explode() statement to get back the group information.

    点赞 评论 复制链接分享
  • doucong1853 doucong1853 2018-09-26 10:46

    I was trying to do the same thing, but the things got complicated so I opted for a different solution:

    <!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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐