html select下拉框选择呈父子状态展示

你可以使用HTML和JavaScript来实现下拉框的父子状态展示。以下是实现的基本步骤：

1. 首先，创建一个父级下拉框（select）元素和一个子级下拉框元素（select）元素。例如：

<select id="parentSelect" onchange="showChildOptions()">
  <option value="">请选择父级选项</option>
  <option value="1">父级选项1</option>
  <option value="2">父级选项2</option>
  <option value="3">父级选项3</option>
</select>

<select id="childSelect">
  <option value="">请选择子级选项</option>
</select>

2. 接下来，创建一个JavaScript函数 `showChildOptions()` 来根据所选的父级选项动态显示相关的子级选项。例如：

function showChildOptions() {
  var parentSelect = document.getElementById("parentSelect");
  var childSelect = document.getElementById("childSelect");
  var parentValue = parentSelect.value;

  // 清空子级选项
  childSelect.innerHTML = "<option value=''>请选择子级选项</option>";

  // 根据所选的父级选项，显示相应的子级选项
  if (parentValue == "1") {
    childSelect.innerHTML += "<option value='11'>子级选项1-1</option>";
    childSelect.innerHTML += "<option value='12'>子级选项1-2</option>";
  } else if (parentValue == "2") {
    childSelect.innerHTML += "<option value='21'>子级选项2-1</option>";
    childSelect.innerHTML += "<option value='22'>子级选项2-2</option>";
  } else if (parentValue == "3") {
    childSelect.innerHTML += "<option value='31'>子级选项3-1</option>";
    childSelect.innerHTML += "<option value='32'>子级选项3-2</option>";
  }
}

3. 在父级下拉框（select）元素的 `onchange` 事件中调用 `showChildOptions()` 函数。这样，每次选择父级选项时，子级选项都会根据所选的父级选项进行更新。

以上就是实现HTML下拉框选择呈父子状态展示的基本步骤。你可以根据自己的需求进行修改和扩展。