Javascript 显示选择选项取决于按钮选择

我想显示动态选择选项

<div id="residential" >
   <input type="radio" value="apartment" id="type_apartment" name="type"  >
   <label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
   <input type="radio" value="bachelor" id="type_bachelor" name="type">
   <label for="type_bachelor" class="radio-inline"> Bechelor  </label>
</div>

<!-- this will show when apartment select -->
<div class="form-group " id="tenant-flat">
   <select id="tenant-type" class="form-control" name="tenant">
      <option value="">Anyone</option>
      <option  value="family">Family</option>
      <option value="bechelor" >Bechelor</option>
   </select>
</div>
<!-- this will show when bechelor is select -->
<div class="form-group " id="tenant">
   <select id="tenant-type" class="form-control" name="tenant">
      <option value="">Anyone</option>
      <option  value="student">Student</option>
      <option value="job_holder" >Job Holder</option>
   </select>
</div>

公寓/公寓
贝切罗
任何人
家庭
贝切罗
任何人
学生
工作人员

---

此选择选项将以相同的表名“租户”存储值。但是如果在两个div中使用name=“tenant”，则它没有存储正确的值。所以我认为，如果选项是动态显示的，那么它应该可以工作。但是我怎么能做到呢？还有其他解决方案吗？

我可以这样做，根据所选按钮设置一个数组，然后用该数组填充select元素，确保每次都清除select元素

功能收音机\u单击（）{
//获取元素
var select=document.getElementById（“选择占用者”）；
var apt=document.getElementById（“类型公寓”）；
//重置选项
选择.options.length=0；
//根据所选内容设置选项数组
如果（apt.checked==true）{
变量选项={
ValueA：“任何人”，
价值B：“家庭”，
价值C：“学士”
};
}否则{
变量选项={
ValueA：“任何人”，
价值B:‘学生’，
价值C:“工作负责人”
};
}
//在选择中设置选项
用于（选项中的索引）{
select.options[select.options.length]=新选项（options[index]，index）；
}
}

公寓/公寓
贝切罗
任何人
家庭
贝切罗

id是唯一的。你不能复制它们。对于你想做的事情，你应该使用一些JS。你能分享一些参考资料吗？请看这里：（但是你可以使用vanilla JS来完成这个简单的任务）。一个片段可能会很有用。