antd Form表单中的select组件在多选的模式下增加全选

后台项目中的新增需求，要在已经是多选模式的select组件中加入全选选项。

把Form表单中的select组件改为受控组件，单独提出来封装一下。

父组件中：

父组件给子组件传回调函数，接收子组件的值，然后存储到state中，Form表单提交时，从state中获取Selet组件的值。

子组件中：

使用JSP页面代码：

代码如下:

<table>

<tr>

<td width="400px" align="left">入学批次：<SELECT NAME="grade"

id="grade" onchange="refreshEduLevelAndSpecialAjax()"> //选择入学批次会刷新层次和专业

<OPTION VALUE="0">

--请选择--

<c:forEach items="${gradeInfo}" var="gradeInfo">

<OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}

</c:forEach>

</SELECT></td>

<td width="400px" align="left">统考课程：<SELECT

NAME="uniExamCourseId" id="uniExamCourseId">

<OPTION VALUE="0">

--请选择--

<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">

<OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}

</c:forEach>

</SELECT></td>

</tr>

<tr>

<td colspan="2" id="refreshEduLevelAndSpecialAjax">   //设置ID，用于填充层次和专业的下拉框

<table>

<tr>

<td width="400" align="left">层       次：<SELECT

NAME="eduLevelId" id="eduLevelId"

onchange="refreshSpecialAjax()">   //选择层次后刷新专业

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${educationLevel}" var="educationLevel">

<OPTION VALUE="${educationLevel.id}">${educationLevel.educationLevelName}

</c:forEach>

</SELECT></td>

<td width="400" align="left" id="refreshSpecialAjax">专        业：<SELECT            //设置ID，用于填充专业的下拉框

NAME="specialId" id="specialId">

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${specialList}" var="special">

<OPTION VALUE="${special.id}">${special.specialName}

</c:forEach>

</SELECT></td>

</tr>

</table>

</td>

</tr>

</table>

<form name="form1">

<select name="sel1" size="4" multiple id="sel1" style="width:210pxheight:120px ">

<option value="0,1,2,3,4,5,6" selected="selected">请选择(默认为全选)</option>

<option value="0">1</option>

<option value="1">2</option>

<option value="2">3</option>

<option value="3">4</option>

<option value="4">5</option>

<option value="6">6</option>

</select>

<input type="submit" onclick="add()">

</form>

其实这种用多选框checkbox实现是最合适的

---