超详细的HTML 标签用法及技巧介绍 | 您所在的位置:网站首页 › 表单元素的标签有哪些内容呢 › 超详细的HTML 标签用法及技巧介绍 |
元素用来创建下拉列表。 元素中的 标签定义了列表中的可用选项。 select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 表单数据提交给服务器时包括 name 属性。 提示和注释 提示: 元素是一种表单控件,可用于在表单中接受用户输入。 HTML 4.01 与 HTML5之间的差异HTML5 增加了一些新的属性。 实例创建带有 4 个选项的选择列表: Volvo Saab Mercedes Audi 尝试一下 » 浏览器支持 所有主流浏览器都支持 标签。 属性New:HTML5 中的新属性。 属性 值 描述 autofocusNew autofocus 规定在页面加载时下拉列表自动获得焦点。 disabled disabled 当该属性为 true 时,会禁用下拉列表。 formNew form_id 定义 select 字段所属的一个或多个表单。 multiple multiple 当该属性为 true 时,可选择多个选项。 name name 定义下拉列表的名称。 requiredNew required 规定用户在提交表单前必须选择一个下拉列表中的选项。 size number 规定下拉列表中可见选项的数目。 全局属性标签支持 HTML 的全局属性。 事件属性标签支持 HTML 的事件属性。 相关文章HTML DOM 参考手册: Select 对象 标签的使用技巧总结
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("文本","值")); }
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); }
9.设置select option被选中
function removeSelect(){ // 向办件人员下拉列表动态添加员工 for ( var i = 0; i < json.length; i++) { var newOption = new Option(json[i].empname, json[i].empid, i); //向办件人员下拉列表添加员工信息 objDeal.options.add(newOption); //客户业务员的Id不为空 if(empbyDealEmpId!="" || empbyDealEmpId!=0){ //员工id等于下拉列表中的值,则下拉列表被选中 if(empbyDealEmpId==objDeal.options[i].value){ //判断此下拉列表被选中 objDeal.options[i].selected=true; } } } } 案例: 如何让html里的select无法选择? 假设有一个select,里面有几个option,因为测试需要,要固定成为其中的一个option,不能选择其他,该怎么做呢?如果disabled这个select,结果就是根本没法取到值了。有没其他的方法? readonly,也是不可以的,依旧可以选择。 答案:只放一个option就可以了 或者给option加上disabled="disabled" aa bb cc 怎么调整select的宽度? 答案:可以在select标签中加入style样式 .s1{ width: 200px;} 很长很长也能显示 很长很长也能显示 html select标签加链接3种方法 html select标签加链接的方法有很多,接下来为大家介绍下几个比较经典的,,感兴趣的朋友可以参考下,希望可以帮助到你。 第一种 : select加链接 === 合作伙伴 === 百度 w3cschool在线教程 优聚 第二种 : 百度 w3cschool在线教程 第三种带跳转按钮的 : select选择-按钮跳转 function setsubmit() { if(mylink.value == 0) window.location='http://www.baidu.com'; if(mylink.value == 1) window.location='http://www.w3cschool.cn'; if(mylink.value == 2) window.location='http://www.youj.com'; } 百度 w3cschool在线教程 优聚 |
CopyRight 2018-2019 实验室设备网 版权所有 |