this指的是SELECT元素本身，它没有您要查找的 * 属性 * data。您需要从所选选项中获取 * 属性 *：

变更：

var selectedVal = $(this).data('role');

字符串

收件人：

var selectedVal = $(this).find(':selected').data('role');

型

示例编码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var $optgroups = $('#subcategory > optgroup');

  $("#category").on("change",function(){
    var selectedVal = $(this).find(':selected').data('role');
    $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]'));
  });  
});
</script>

<select id="category">
  <option value="1" data-role="Fashion">Fashion</option>
  <option value="2" data-role="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
  <optgroup label="Fashion">
    <option value="Men's wear">Men's wear</option>
    <option value="Women's wear">Women's wear</option>
  </optgroup>
  <optgroup label="Electronics">
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
</select>

型

要同时拥有类别和子类别的ID，唯一缺少的是<select>上的name属性。
下面是一个简单的JavaScript示例。

document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.addEventListener('submit', e => {
    e.preventDefault();
    let data = new FormData(e.target);
    console.log([...data]);
  });
  
  document.forms.form01.category.addEventListener('change', e => {
    let form = e.target.form;
    if(e.target.value){
      let subcatname = e.target.selectedOptions[0].dataset.role;
      [...form.subcategory.querySelectorAll('optgroup')]
        .forEach(group => group.disabled = true);
      form.subcategory.querySelector(`optgroup[label = ${subcatname}]`).disabled = false;
    }
  });
  
});

optgroup:disabled {
  display: none;
}

<form name="form01">
  <select name="category">
    <option value="">Category</option>
    <option value="1" data-role="Fashion">Fashion</option>
    <option value="2" data-role="Electronics">Electronics</option>
  </select>
  <select name="subcategory" id="subcategory">
    <optgroup label="Fashion" disabled>
      <option value="1">Men's wear</option>
      <option value="2">Women's wear</option>
    </optgroup>
    <optgroup label="Electronics" disabled>
      <option value="3">Television</option>
      <option value="4">Game Console</option>
    </optgroup>
  </select>
  <button type="submit">Submit</button>
</form>