概述
本 Demo 展示了如何添加和配置下拉列表框（ComboBox）表单控件。Demo 创建了一个下拉列表框，从工作表的单元格区域获取选项数据，支持用户选择后将值同步到指定单元格，并监听值变化事件。
实现思路
在工作表 A 列准备数据源（A1:A14）
使用 addFormControl 方法添加下拉列表框表单控件
通过 options 方法配置下拉列表框属性：设置数据源范围、链接单元格和下拉显示行数
使用 value 方法设置默认选中项
绑定 FormControlValueChanged 事件监听值变化
代码解析
准备数据源
这段代码在 A 列的前 14 行填充了 "A1" 到 "A14" 的数据，作为下拉列表框的选项数据源。
添加下拉列表框表单控件
使用 addFormControl 方法创建下拉列表框：
第一个参数为控件名称
第二个参数指定控件类型为 comboBox
后四个参数分别指定位置和尺寸（左边距 100、上边距 50、宽度 200、高度 30）
配置下拉列表框属性
通过 options 方法获取并设置下拉列表框的配置：
inputRange：指定下拉选项的数据源范围
cellLink：指定与控件关联的单元格，当用户选择选项时，该单元格会显示选中项的索引
dropDownLines：设置下拉列表展开时显示的行数
设置默认选中项
设置下拉列表框的默认选中值为索引 1（即第二项 "A2"）。
监听值变化事件
绑定 FormControlValueChanged 事件，当用户选择不同选项时触发，事件参数包含：
newValue：新选中的值
oldValue：之前的值
shape：触发事件的表单控件形状
运行效果
工作表显示一个下拉列表框控件，点击下拉按钮会展开显示 6 行选项
下拉列表中的选项来自 A1:A14 单元格区域
默认选中第二项（A2）
当用户选择不同选项时，C1 单元格会显示选中项的索引值
控制台会输出值变化信息，显示新选中的值
API 参考
addFormControl 方法
name：控件名称
formControlType：表单控件类型枚举值
left、top：控件位置（可选）
width、height：控件尺寸（可选）
IComboBoxFormControlOptions 接口
inputRange：下拉选项的数据源范围
cellLink：关联的单元格引用
dropDownLines：下拉列表显示的行数
FormControlValueChanged 事件
当表单控件的值发生变化时触发，事件参数包含 newValue、oldValue、shape 等信息。
window.onload = function () {
var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
workbook.suspendPaint();
initSheet1(workbook.getSheet(0));
workbook.resumePaint();
};
function initSheet1(sheet) {
for (let i = 0; i < 14; i++) {
sheet.setValue(i, 0, "A" + (i + 1));
}
var comboBox = sheet.shapes.addFormControl("comboBox", GC.Spread.Sheets.Shapes.FormControlType.comboBox, 100, 50, 200, 30);
var options = comboBox.options();
options.inputRange = "A1:A14";
options.cellLink = "C1";
options.dropDownLines = 6;
comboBox.options(options);
comboBox.value(1);
sheet.bind(GC.Spread.Sheets.Events.FormControlValueChanged, function (s, args) {
console.log("value changed...", args.newValue);
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
input[type="text"] {
width: 200px;
margin-right: 20px;
}
label {
display: inline-block;
width: 110px;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
label {
display: block;
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
code {
border: 1px solid #000;
}
