跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

HTML select option详细说明

林译川
林译川
• 👁 3人浏览过
这篇文章介绍html select option详细说明 javascript 之HTML（select option）详解 一、基础理解: var e = document .getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option 对象 ,即在 1.动态创建select function createSelect(){ 立即学习 “ 前端免费学习笔记（深入） ”； var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找对象， var obj=document.getElementById('mySelect'); //添加一个选项 obj.add(new      Option("文本","值"));    //这个只能在IE中有效 obj.options.add(new Option("text","value")); //这个兼容IE与firefox } 3.删除所有选项option function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; } 4.删除一个选项option function removeOne(){ var obj=document.getElementById('mySelect'); //index,要删除选项的序号，这里取当前选中选项的序号 var index=obj.selectedIndex; obj.options.remove(index); } 5.获得选项option的值 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].value; 6.获得选项option的文本 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].text; 7.修改选项option var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index]=new Option("新文本","新值"); 8.删除select function removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); }

根据这些东西,自己用JQEURY AJAX+ JSON 实现了一个小功能如下: JS代码:(只取了于SELECT相关的代码)
/** * @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现) * @prarm selectId 下拉列表的ID * @prarm method 要调用的方法名称 * @prarm temp 此处存放软件ID * @prarm url 要跳转的地址 */ function linkAgeJson(selectId,method,temp,url){ $j.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: url,//要访问的后台地址 data: "method=" + method+"&temp="+temp,//要发送的数据 success: function(msg){//msg为返回的数据，在这里做数据绑定 var data = msg.lists; coverJsonToHtml(selectId,data); } }); } /** * @description 将JSON数据转换成HTML数据格式 * @prarm selectId 下拉列表的ID * @prarm nodeArray 返回的JSON数组 * */ function coverJsonToHtml(selectId,nodeArray){ //get select var tempSelect=$j("#"+selectId); //clear select value isClearSelect(selectId,'0'); var tempOption=null; for(var i=0;i'+nodeArray[i].mc+' '); //put Option to select tempSelect.append(tempOption); } // 获取退化构件列表 getCpgjThgl(selectId,'thgjDm'); } /** * @description 清空下拉列表的值 * @prarm selectId 下拉列表的ID * @prarm index 开始清空的下标位置 */ function isClearSelect(selectId,index){ var length=document.getElementById(selectId).options.length; while(length!=index){ //长度是在变化的，因为必须重新获取 length=document.getElementById(selectId).options.length; for(var i=index;i
HTML代码:
*引用软件：
*引用分版：
退化构件：

相关文章