JavaScript操作HTML控件：下拉列表、单选与复选框实例

动态填充下拉列表// 实现下拉列表的动态填充功能
_showSchools: function (data) { // data 参数代表传入的数据对象
var mySelect = document.getElementById("selectSchools"); // 通过ID获取下拉选择框元素
 mySelect.options.length = 0; // 清空现有选项
 // 遍历数据对象，将每个元素添加为select标签的option
 for (var index in data) {
 var item = data[index];
 // 创建Option对象，第一个参数为显示文本，第二个参数为实际值
 var opp = new Option(item.SchoolName, item.name);
 opp.name = "option" + index; // 为option设置自定义name属性
 mySelect.add(opp); // 将新选项添加到下拉框中
 }
 },
获取下拉列表选中值与显示文本// 获取下拉列表当前选中的值
var schoolId = document.getElementById("selectSchools").value;
// 通常获取的是选中项的值，若需获取显示文本，可参考以下方法：
function on_idmbzd_change(){ 
 var sel_obj=document.getElementById("idMbzd");
 var index=sel_obj.selectedIndex; // 获取选中项的索引
 alert(sel_obj.options[index].value); // 弹出选中项的值
 alert(sel_obj.options[index].text); // 弹出选中项的显示文本
}
单选按钮的值获取与状态设置// 获取单选按钮组中被选中的值
 var chkObjs = document.getElementsByName("radio");
 var checkvalue = null;
 for (var i = 0; i < chkObjs.length; i++) {
 if (chkObjs[i].checked) { // 判断哪个单选按钮被选中
 checkvalue = parseInt(chkObjs[i].value); // 获取并转换为整数
 }
 }
// 根据实体数据设置单选按钮的选中状态
if (entity.SelectType == 1) document.getElementById("SelectType").checked = true;
if (entity.SelectType == 0) document.getElementById("UnSelectType").checked = true;
多选框的状态设置// 设置多选框的选中状态
setCheckBox: function (data) {
 var courseList = document.getElementsByName("CourseList");
 for (var i = 0; i < courseList.length - 1; i++) {
 if (courseList[i].value==data) { // 如果选项值匹配传入数据
 courseList[i].checked=true; // 将该多选框设为选中状态
 }
 }
            },