中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

HTML参考手册

  • HTML 标签列表(字母排序)
  • HTML 标签列表(功能排序)
  • HTML 全局属性
  • HTML 事件
  • HTML 画布
  • HTML 音频/视频
  • HTML 有效DOCTYPES
  • HTML 颜色名
  • HTML 在线拾色器
  • HTML 颜色混搭
  • HTML 字符集
  • HTML ASCII 参考手册
  • HTML ISO-8859-1 参考手册
  • HTML 符号实体参考手册
  • HTML URL 编码参考手册
  • HTML 语言代码参考手册
  • HTTP 状态消息
  • HTTP 方法:GET 对比 POST
  • Px、Em 换算工具
  • px,pt,em 换算表
  • px、em、rem区别介绍
  • 键盘快捷键
  • HTML标签

  • HTML track kind 属性
  • HTML video autoplay 属性
  • HTML video controls 属性
  • HTML track label 属性
  • HTML video height 属性
  • HTML track src 属性
  • HTML video loop 属性
  • HTML track srclang 属性
  • HTML video muted 属性
  • HTML tr align 属性
  • HTML video poster 属性
  • HTML tr bgcolor 属性
  • HTML video preload 属性
  • HTML tr char 属性
  • HTML video src 属性
  • HTML tr charoff 属性
  • HTML video width 属性
  • HTML tr valign 属性
  • HTML track default 属性
  • HTML tbody valign 属性
  • HTML script src 属性
  • HTML tbody charoff 属性
  • HTML script type 属性
  • HTML tbody char 属性
  • HTML q cite 属性
  • HTML tbody align 属性
  • HTML ol compact 属性
  • HTML style media 属性
  • HTML ol reversed 属性
  • HTML style scoped 属性
  • HTML ol start 属性
  • HTML style type 属性
  • HTML ol type 属性
  • HTML script async 属性
  • HTML script charset 属性
  • HTML script defer 属性
  • HTML embed height 属性
  • HTML button formaction 属性
  • HTML basefont face 属性
  • HTML embed src 属性
  • HTML button formenctype 属性
  • HTML embed type 属性
  • HTML button formmethod 属性
  • HTML basefont size 属性
  • HTML embed width 属性
  • HTML button formnovalidate 属性
  • HTML meta charset 属性
  • HTML dir compact 属性
  • HTML button formtarget 属性
  • HTML meta content 属性
  • HTML del cite 属性
  • HTML meta http-equiv 属性
  • HTML button name 属性
  • HTML del datetime 属性
  • HTML meta name 属性
  • HTML button type 属性
  • HTML button autofocus 属性
  • HTML button value 属性
  • HTML meta scheme 属性
  • HTML button disabled 属性
  • HTML menu label 属性
  • HTML button form 属性
  • HTML menu type 属性
  • HTML basefont color 属性
  • HTML map name 属性
  • HTML fieldset disabled 属性
  • HTML fieldset form 属性
  • HTML fieldset name 属性
  • 超详细的HTML <select> 标签用法及技巧介绍

    阅读 (2126)

    HTML <select> 标签定义及使用说明

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

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


    HTML select


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

    提示和注释

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


    HTML 4.01 与 HTML5之间的差异

    HTML5 增加了一些新的属性。


    实例

    创建带有 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> 标签。


    属性

    New :HTML5 中的新属性。

    属性 描述
    autofocusNew autofocus 规定在页面加载时下拉列表自动获得焦点。
    disabled disabled 当该属性为 true 时,会禁用下拉列表。
    formNew form_id 定义 select 字段所属的一个或多个表单。
    multiple multiple 当该属性为 true 时,可选择多个选项。
    name name 定义下拉列表的名称。
    requiredNew required 规定用户在提交表单前必须选择一个下拉列表中的选项。
    size number 规定下拉列表中可见选项的数目。


    全局属性

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


    事件属性

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


    相关文章

    HTML DOM 参考手册: Select 对象

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


    }


    删除所有选项option


    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("新文本","新值");


    删除select

    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"
    <form id="form1" name="form1" method="post" action="">
      <select name="select">
        <option>aa</option>
    	<option disabled="disabled">bb</option>
    	<option>cc</option>
      </select>
    </form>


    HTML标签

    怎么调整select的宽度?


    答案:可以在select标签中加入style样式
    <style>.s1{ width: 200px;}</style>
    <select class="s1">
      <OPTION>很长很长也能显示</OPTION>
      <OPTION>很长很长也能显示</OPTION>
    </select>
    

    html select标签加链接3种方法

    html select标签加链接的方法有很多,接下来为大家介绍下几个比较经典的,,感兴趣的朋友可以参考下,希望可以帮助到你。

    第一种: 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>select加链接</title> 
    </head> 
    <body> 
    <SCRIPT language=javascript> 
    <!-- 
    // open the related site windows 
    function mbar(sobj) { 
    var docurl =sobj.options[sobj.selectedIndex].value; 
    if (docurl != "") { 
    open(docurl,'_blank'); 
    sobj.selectedIndex=0; 
    sobj.blur(); 
    } 
    } 
    //--> 
    </SCRIPT> 
    <Select onchange=mbar(this) name="select"> 
    <OPTION selected>=== 合作伙伴 ===</OPTION> 
    <OPTION value="http://www.baidu.com">百度</OPTION> 
    <OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> 
    <OPTION value="http://www.youj.com">优聚</OPTION> 
    </Select> 
    </body> 
    </html> 
    

    第二种
    <select name="pageselect" onchange="self.location.href=options[selectedIndex].value" > 
    <OPTION value="http://www.baidu.com">百度</OPTION> 
    <OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> 
    </select> 
    

    第三种带跳转按钮的
    <html><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>select选择-按钮跳转</title> 
    <script type="text/javascript"> 
    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'; 
    } 
    </script> 
    </head> 
    <body> 
    <select name="mylink" id="mylink"> 
    <OPTION value="0">百度</OPTION> 
    <OPTION value="1">w3cschool在线教程</OPTION> 
    <OPTION value="2">优聚</OPTION> 
    </select> 
    <input type="button" id="btn" value="提交" onclick="setsubmit(this)" /> 
    </body> 
    </html> 
    

    关闭
    程序员人生