HTML单选按钮选项内嵌入下拉菜单是否可实现？

完全可以实现该效果，使用原生HTML、CSS搭配少量JS即可完成，不需要额外引入第三方框架，下面是具体实现方案：

核心是将单选按钮、说明文本、下拉选择框放在同一组关联容器内，通过label标签的关联特性实现单选选中交互，同时添加少量事件处理避免下拉操作和单选操作冲突。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>单选内嵌下拉菜单示例</title>
  <style>
    .radio-option {
      margin: 15px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .radio-option label {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .radio-option select {
      padding: 3px 6px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: default;
    }
  </style>
</head>
<body>
  <form action="#" method="post">
    <!-- 普通单选选项 -->
    <div class="radio-option">
      <input type="radio" name="delivery" id="delivery-home" value="home">
      <label for="delivery-home">送货上门</label>
    </div>

    <!-- 带下拉菜单的单选选项 -->
    <div class="radio-option">
      <input type="radio" name="delivery" id="delivery-point" value="point">
      <label for="delivery-point">
        自提点取货，选择自提点：
        <select name="point_id" id="point_id">
          <option value="1">朝阳路自提点</option>
          <option value="2">中关村自提点</option>
          <option value="3">亦庄自提点</option>
        </select>
      </label>
    </div>

    <!-- 其他单选选项 -->
    <div class="radio-option">
      <input type="radio" name="delivery" id="delivery-express" value="express">
      <label for="delivery-express">驿站代收</label>
    </div>
  </form>

  <script>
    // 阻止下拉框点击事件冒泡，避免触发单选切换
    document.querySelectorAll('.radio-option select').forEach(el => {
      el.addEventListener('click', e => e.stopPropagation())
    })
  </script>
</body>
</html>

• 点击单选按钮、选项文本区域，都会正常选中对应的单选项
• 点击下拉菜单区域可正常展开、选择下拉选项，不会干扰当前单选的选中状态
• 表单提交时可以同时获取单选的选中值和下拉菜单的选中值，符合常规表单数据提交规则

内容的提问来源于stack exchange，提问作者Ken Russel Sy