我最近听说过这个“影子DOM”的事情，以及如何更好地操作DOM元素，因为使用它不需要你删除或添加元素，而是你可以将它们移入和脱离影子DOM（或类似的东西）。
我有一个select元素，里面有几个选项。根据所选的选项，我想完全改变第二个选择（id =“select2”？）。第二个选择的版本彼此完全不同。
我可以将所有这些版本加载到jQuery对象中，并根据第一个下拉列表中的选择在它们之间交替，这可能会正常工作。但我想探索shadow DOM选项。
我该怎么做？ jQuery可以帮助我吗？
第二个选择是否总是具有相同的ID，或者每个阴影选择是否都有自己的ID，因此第二个选择的ID会改变吗？
以下是一些示例HTML：
<table id="maintable">
<thead>
<th>1st select</th>
<th>2nd Select</th>
</thead>
<tbody>
<tr>
<td>
<select id="select1">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
</td>
<td>
<select id="select2" name="dependent_options">
<option value="do1">Do this</option>
<option value="do2">Do that</option>
</select>
</td>
</tbody>
</table>
其他选择替换上表中的select2：
<select id="select2a" name="dependent_options"><!-- change id to select2a or keep the same as select2? -->
<option value="do3">Do a third thing</option>
<option value="do4">Do a 4th thing</option>
</select>