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