select2二级联动第二级默认选中第一个option值

你可以在页面加载时，通过 JavaScript 将第二个下拉列表的第一个 option 标记为选中状态。以下是一个简单的示例代码：

$(document).ready(function() {
  // 找到第二个下拉列表
  var $secondSelect = $('#second-select');

  // 将第一个 option 标记为选中状态
  $secondSelect.find('option:first-child').prop('selected', true);
});

其中，`#second-select` 是第二个下拉列表的 ID，你需要将其替换为你实际使用的 ID。这段代码使用了 jQuery 库来查找和修改 DOM 元素。如果你不使用 jQuery，可以使用原生 JavaScript 代码实现相同的逻辑。

相关问题

select2组件使用二级联动第二级默认选中第一个option值

你可以通过 JavaScript 代码实现 select2 二级联动第二级默认选中第一个 option 值。具体的实现方法如下：

1. 在 HTML 中定义两个 select 元素，第一个 select 元素为父级，第二个 select 元素为子级，代码如下：

<select id="parent">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="child">
  <option value="11">Option 11</option>
  <option value="12">Option 12</option>
  <option value="21">Option 21</option>
  <option value="22">Option 22</option>
</select>

2. 使用 select2 插件初始化两个 select 元素，代码如下：

$('#parent').select2();
$('#child').select2();

3. 监听父级 select 元素的 change 事件，在事件处理函数中根据父级选中的值动态生成子级的 option 元素，并设置第一个 option 元素为默认选中。代码如下：

$('#parent').on('change', function () {
  var parentVal = $(this).val();
  var childOptions = '';

  if (parentVal == '1') {
    childOptions += '<option value="11">Option 11</option>';
    childOptions += '<option value="12">Option 12</option>';
  } else if (parentVal == '2') {
    childOptions += '<option value="21">Option 21</option>';
    childOptions += '<option value="22">Option 22</option>';
  }

  $('#child').html(childOptions).val($('#child option:first').val()).trigger('change');
});

以上代码中，我们通过判断父级 select 元素选中的值，动态生成子级的 option 元素，并使用 val() 方法设置第一个 option 元素为默认选中。最后，使用 trigger() 方法触发子级 select 元素的 change 事件，以便 select2 插件更新选中状态。

vue3 element-plus 动态添加el-select 两级联动 并且不能重复选择

在 Vue3 中，结合 Element Plus 组件库创建动态添加的二级联动 `el-select` 具有不允许重复选择的功能，可以按照以下步骤进行：

1. 首先，安装 Element Plus 和相关的依赖：

npm install element-plus @vue/cli-plugin-element-plus

2. 然后，在 Vue 组件中设置数据结构，用于存储选项并跟踪已选的值，例如：

<template>
  <div ref="selectWrapper">
    <!-- 动态生成的 el-select -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [], // 顶级选项
      subOptions: {}, // 子级选项对象，key为顶级选项的 value，value为子选项数组
      selectedItems: {}, // 已选择的项，key为顶级选项的 value，value为对应的子选项值
    };
  },
  // ...其他生命周期钩子和方法
};
</script>

3. 创建一个方法来动态添加新的 `el-select`，并将选择绑定到 `selectedItems`：

methods: {
  addSelect(parentId) {
    const newSelect = this.$createElement('el-select', {
      v-model: null,
      placeholder: '请选择',
      clearable: true, // 清除按钮
      multiple: false, // 一级联动默认单选
      filterable: true,
    });

    // 添加下拉列表
    const subOptionsList = this.subOptions[parentId] || [];
    subOptionsList.map(subOption => {
      newSelect.append(
        `<el-option :label="${subOption.label}" :value="${subOption.value}"></el-option>`
      );
    });

    // 添加新 select 到 dom
    this.$refs.selectWrapper.append(newSelect);

    // 监听新选中的子选项
    newSelect.addEventListener('select', (e) => {
      if (!this.selectedItems[parentId]) {
        this.selectedItems[parentId] = {};
      }
      this.selectedItems[parentId][e.value] = e.value;
    });
  },
},
// 初始化时添加第一个 select
mounted() {
  const firstOption = this.options.find(option => option.parentId === undefined);
  if (firstOption) {
    this.addSelect(firstOption.id);
  }
},
</script>

4. 使用时，通过数据驱动的方式控制哪些选项可以添加，以及初始化时是否需要自动添加第一个 select。