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 插件更新选中状态。

antd select标签二级联动第一个选择框改变时 清空第二个选择框选择的值

您可以在第一个选择框的 `onChange` 事件中设置第二个选择框的值为空，代码示例如下：

import React, { useState } from 'react';
import { Select } from 'antd';

const { Option } = Select;

const App = () => {
  const [firstValue, setFirstValue] = useState('');
  const [secondValue, setSecondValue] = useState('');

  const handleFirstChange = value => {
    setFirstValue(value);
    setSecondValue('');
  };

  const handleSecondChange = value => {
    setSecondValue(value);
  };

  return (
    <div>
      <Select value={firstValue} onChange={handleFirstChange}>
        <Option value="1">Option 1</Option>
        <Option value="2">Option 2</Option>
      </Select>
      <Select value={secondValue} onChange={handleSecondChange}>
        {firstValue === '1' && (
          <Option value="a">Option A</Option>
        )}
        {firstValue === '2' && (
          <Option value="b">Option B</Option>
        )}
      </Select>
    </div>
  );
};

export default App;

在上面的代码中，我们在第一个选择框的 `onChange` 事件中设置了第二个选择框的值为空。这样，在第一个选择框的值发生变化时，第二个选择框的值就会被清空。