• HTML <!--...--> 注释标签
  • HTML <!DOCTYPE> 声明
  • HTML <a> 标签
  • HTML <abbr> 标签
  • HTML <acronym> 标签 - HTML5 不支持
  • HTML <address> 标签
  • HTML <applet> 标签 - HTML5 不支持
  • HTML <area> 标签
  • HTML <article> 标签
  • HTML <aside> 标签
  • HTML <audio> 标签
  • HTML <b> 标签
  • HTML <base> 标签
  • HTML <basefont> 标签 - HTML5 不支持
  • HTML <bdi> 标签
  • HTML <bdo> 标签
  • HTML <big> 标签 - HTML5 不支持
  • HTML <blockquote> 标签
  • HTML <br> 标签
  • HTML <button> 标签
  • HTML <canvas> 标签
  • HTML <caption> 标签
  • HTML <body> 标签
  • HTML <center> 标签 - HTML5 不支持
  • HTML <cite> 标签
  • HTML <code> 标签
  • HTML <col> 标签
  • HTML <colgroup> 标签
  • HTML <command> 标签
  • HTML <datalist> 标签
  • HTML <dd> 标签
  • HTML <dl> 标签
  • HTML <dt> 标签
  • HTML <del> 标签
  • HTML <details> 标签
  • HTML <dfn> 标签
  • HTML <dialog> 标签
  • HTML <dir> 标签 - HTML5 不支持
  • HTML <div> 标签
  • HTML <embed> 标签
  • HTML <fieldset> 标签
  • HTML <figcaption> 标签
  • HTML <figure> 标签
  • HTML <font> 标签 - HTML5 不支持
  • HTML <footer> 标签
  • HTML <frame> 标签 - HTML5 不支持
  • HTML <frameset> 标签 - HTML5 不支持
  • HTML <head> 标签
  • HTML <header> 标签
  • HTML <hgroup> 标签
  • HTML <h1> - <h6> 标签
  • HTML <hr> 标签
  • HTML <em> 标签
  • HTML <i> 标签
  • HTML <iframe> 标签
  • HTML <img> 标签
  • HTML <input> 标签
  • HTML <ins> 标签
  • HTML <kbd> 标签
  • HTML <keygen> 标签
  • HTML <label> 标签
  • HTML <legend> 标签
  • HTML <li> 标签
  • HTML <link> 标签
  • HTML <map> 标签
  • HTML5 <mark> 标签
  • HTML <menu> 标签
  • HTML <meta> 标签
  • HTML <meter> 标签
  • HTML <nav> 标签
  • HTML <noframes> 标签HTML5不支持该标签
  • HTML <noscript> 标签
  • HTML <object> 标签
  • HTML <ol> 标签
  • HTML <optgroup> 标签
  • HTML <output> 标签
  • HTML <option> 标签
  • HTML <p> 标签
  • HTML <param> 标签
  • HTML <form> 标签
  • HTML <pre> 标签
  • HTML <html> 标签
  • HTML5 <progress> 标签
  • HTML <q> 标签
  • HTML <rp> 标签
  • HTML <rt> 标签
  • HTML <ruby> 标签
  • HTML <s> 标签
  • HTML <samp> 标签
  • HTML <script> 标签
  • HTML <section> 标签
  • HTML <select> 标签
  • HTML <small> 标签
  • HTML <source> 标签
  • HTML <span> 标签
  • HTML <strike> 标签 - HTML5 不支持
  • HTML <strong> 标签
  • HTML <style> 标签
  • HTML <sub> 标签
  • HTML <summary> 标签
  • HTML <sup> 标签
  • HTML <table> 标签
  • HTML <tbody> 标签
  • HTML <td> 标签
  • HTML <textarea> 标签
  • HTML <tfoot> 标签
  • HTML <th> 标签
  • HTML <thead> 标签
  • HTML <time> 标签
  • HTML <title> 标签
  • HTML <tr> 标签
  • HTML <track> 标签
  • HTML <tt> 标签 - HTML5 不支持
  • HTML <u> 标签
  • HTML <ul> 标签
  • HTML <var> 标签
  • HTML <video> 标签
  • HTML <wbr> 标签
  •  
    当前位置:  教程>HTML标签参考手册

    HTML <select> 标签

     
    分享到:
        发布时间:2017-1-18  


        本文导语: HTML <select> 标签有什么作用? select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单...

     

    HTML <select> 标签有什么作用?

           select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性

    Html Select option 如何设置某一项为默认选择项

    <option  selected = "selected">用 selected = "selected"默认选择。

    设置某一项为默认选择项的实例代码(www.169it.com):

    <select name="isAudit"> 

    <option value="2">全部</option> 

    <option value="1" selected = "selected">通过</option> <!--这里默认--!>

    <option value="0">未通过</option> 

    </select>


    select 元素实例(www.169it.com)

    创建带有 4 个选项的选择列表:

    <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    </select>




    浏览器支持

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

    所有主流浏览器都支持 <select> 标签。


    标签定义及使用说明

    <select> 元素用来创建下拉列表

    <select> 元素中的 <option> 标签定义了列表中的可用选项。


    使用html 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 optin被中


    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;
    }
    }
    }
    }



    提示注释

    提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。


    HTML 4.01 与 HTML5之间的差异

    HTML5 增加了一些新的属性。


    属性

    New:HTML5 中的新属性。

    属性描述
    autofocusNewautofocus规定在页面加载时下拉列表自动获得焦点
    disableddisabled当该属性为 true 时,会禁用下拉列表。
    formNewform_id定义 select 字段所属的一个或多个表单。
    multiplemultiple当该属性为 true 时,可选择多个选项。
    namename定义下拉列表的名称。
    requiredNewrequired规定用户在提交表单必须选择一个下拉列表中的选项。
    sizenumber规定下拉列表中可见选项的数目。



    全局属性

    <select> 标签支持 HTML 的全局属性。


    事件属性

    <select> 标签支持 HTML 的事件属性。


    html select的事件详细介绍 

    onactivate : 当对象设置为活动元素时触发。

    onafterupdate : 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。

    onbeforeactivate :  Microsoft® Internet Explorer 6 新增 对象要被设置为当前元素前立即触发。

    onbeforecut : 当选中区从文档中删除之前在源对象触发。

    onbeforedeactivate : 在 activeElement 从当前对象变为父文档其它对象之前立即触发。

    onbeforeeditfocus : 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。

    onbeforepaste  :在选中区从系统剪贴板粘贴到文档前在目标对象上触发。

    onbeforeupdate : 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。

    onblur : 在对象失去输入焦点时触发。

    onchange : 当对象或选中区的内容改变时触发。

    onclick : 在用户用鼠标左键单击对象时触发。

    oncontextmenu : 在用户使用鼠标右键单击客户区打开上下文菜单时触发。

    oncontrolselect : 当用户将要对该对象制作一个控件选中区时触发。

    oncut : 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。

    ondblclick : 当用户双击对象时触发。

    ondeactivate : 当 activeElement 从当前对象变为父文档其它对象时触发。

    ondragenter : 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。

    ondragleave : 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。

    ondragover : 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。

    ondrop : 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。

    onerrorupdate  :更新数据源对象中的关联数据出错时在数据绑定对象上触发。

    onfocus : 当对象获得焦点时触发。

    onfocusin :Microsoft® Internet Explorer 6 新增 当元素将要被设置为焦点之前触发。

    onfocusout :Microsoft® Internet Explorer 6 新增 移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。

    onhelp : 当用户在浏览器为当前窗口时按 F1 键时触发。

    onkeydown : 当用户按下键盘按键时触发。

    onkeypress : 当用户按下字面键时触发。

    onkeyup : 当用户释放键盘按键时触发。

    onlosecapture : 当对象失去鼠标捕捉时触发。

    onmousedown : 当用户用任何鼠标按钮单击对象时触发。

    onmouseenter : 当用户将鼠标指针移动到对象内时触发。

    onmouseleave  :当用户将鼠标指针移出对象边界时触发。

    onmousemove : 当用户将鼠标划过对象时触发。

    onmouseout : 当用户将鼠标指针移出对象边界时触发。

    onmouseover : 当用户将鼠标指针移动到对象内时触发。

    onmouseup : 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

    onmousewheel :Microsoft® Internet Explorer 6 新增 当鼠标滚轮按钮旋转时触发。

    onmove : 当对象移动时触发。

    onmoveend : 当对象停止移动时触发。

    onmovestart : 当对象开始移动时触发。

    onpaste : 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。

    onpropertychange : 当在对象上发生对象上发生属性更改时触发。

    onreadystatechange : 当对象状态变更时触发。

    onresize : 当对象的大小将要改变时触发。

    onresizeend : 当用户更改完控件选中区中对象的尺寸时触发。

    onresizestart : 当用户开始更改控件选中区中对象的尺寸时触发。

    onselectstart : 对象将要被选中时触发。

    • 本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.169IT.COM)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:HTML <select> 标签
    相关文章推荐:
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • HTML5 在线工具 html5demos
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • 框架网页中如何使用sendredirect(a.html),使得a.html不显示在框架中,是整页显示!
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • Sar数据转HTML Sar2html
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • 关于editplus的使用,编译完生成.class后,我又编写了html来执行applet,将其保存,如何经ie解释打开(直接在editplus上操作)不是显示html语言呀
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • python实现html转ubb代码(html2ubb)
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • 在html运行的applet中需要访问oracle,在jb里可以连接,但直接点击html时就出现找不到类“sun.jdbc.odbd.JdbcOdbcDriver"?
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • 把 CDATA 中的内容(有可能是不规范的Html代码)以Html方式展现出来。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号