如何在由标题分隔的引导下拉列表中有两个不同的结果？

<select>
  <optgroup label="第一个结果">
    <option value="选项1">选项1</option>
    <option value="选项2">选项2</option>
    <option value="选项3">选项3</option>
  </optgroup>
  <optgroup label="第二个结果">
    <option value="选项4">选项4</option>
    <option value="选项5">选项5</option>
    <option value="选项6">选项6</option>
  </optgroup>
</select>

<select id="mySelect"></select>

<script>
  var select = document.getElementById("mySelect");

  var optgroup1 = document.createElement("optgroup");
  optgroup1.label = "第一个结果";
  
  var option1 = document.createElement("option");
  option1.value = "选项1";
  option1.text = "选项1";
  optgroup1.appendChild(option1);
  
  var option2 = document.createElement("option");
  option2.value = "选项2";
  option2.text = "选项2";
  optgroup1.appendChild(option2);
  
  var option3 = document.createElement("option");
  option3.value = "选项3";
  option3.text = "选项3";
  optgroup1.appendChild(option3);

  var optgroup2 = document.createElement("optgroup");
  optgroup2.label = "第二个结果";
  
  var option4 = document.createElement("option");
  option4.value = "选项4";
  option4.text = "选项4";
  optgroup2.appendChild(option4);
  
  var option5 = document.createElement("option");
  option5.value = "选项5";
  option5.text = "选项5";
  optgroup2.appendChild(option5);
  
  var option6 = document.createElement("option");
  option6.value = "选项6";
  option6.text = "选项6";
  optgroup2.appendChild(option6);
  
  select.appendChild(optgroup1);
  select.appendChild(optgroup2);
</script>