级联下拉列表改变时扩展选择项到第一个下拉列表。

HTML代码：

<select id="firstDropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select id="secondDropdown">
    <option value="1" data-ref="1">Option 1.1</option>
    <option value="2" data-ref="1">Option 1.2</option>
    <option value="3" data-ref="1">Option 1.3</option>
    <option value="4" data-ref="2">Option 2.1</option>
    <option value="5" data-ref="2">Option 2.2</option>
    <option value="6" data-ref="2">Option 2.3</option>
    <option value="7" data-ref="3">Option 3.1</option>
    <option value="8" data-ref="3">Option 3.2</option>
    <option value="9" data-ref="3">Option 3.3</option>
</select>

JavaScript代码：

// 级联下拉列表绑定change事件
$("#firstDropdown").change(function(){
    // 在第二个下拉列表中根据第一个下拉列表选中的值筛选出相关选项
    var filteredOptions = $("#secondDropdown").find('option[data-ref="' + $(this).val() + '"]');
    // 将筛选出的选项设置为选中状态
    filteredOptions.prop('selected', true);
});