如何在CSelect组件的option选项下添加多个嵌套子选项

你可以直接用HTML原生的<optgroup>标签实现选项分组效果，你在用的CSelect组件完全兼容该原生标签的用法，分两种常用场景适配：

• 场景1：op3仅作为分组标题，本身不可被选中
  直接把原有的op3选项替换为<optgroup>标签包裹子选项即可，修改后代码如下：

  <CSelect custom name="select_pattern_filter" id="select_pattern_filter" onChange={onChange} >
    <option value="" defaultValue>Veuillez sélectionner</option>
    <option value="opt1">op1</option>
    <option value="opt2">opt2</option>
    <optgroup label="op3">
      <option value="op3-1">op3子选项1</option>
      <option value="op3-2">op3子选项2</option>
    </optgroup>
  </CSelect>
  

• 场景2：需要op3本身也可以作为可选选项
  这种场景不用<optgroup>，直接给子选项加缩进和层级标识做视觉区分即可，代码示例：

  <CSelect custom name="select_pattern_filter" id="select_pattern_filter" onChange={onChange} >
    <option value="" defaultValue>Veuillez sélectionner</option>
    <option value="opt1">op1</option>
    <option value="opt2">opt2</option>
    <option value="op3">op3</option>
    <option value="op3-1" style={{paddingLeft: '20px'}}>└ op3子选项1</option>
    <option value="op3-2" style={{paddingLeft: '20px'}}>└ op3子选项2</option>
  </CSelect>
  

两种方案都可以直接运行，你可以根据自己是否需要op3可被选中的需求选择即可。

内容的提问来源于stack exchange，提问作者SEMER BEN SALEM