• 回复@大雨582:建议你学学需求层次理论…… 2019-10-16
  • 征稿:“改革印记”邀您讲述中国发展故事 2019-10-16
  • 凤凰古城端午抢鸭子大战引万人围观 2019-10-06
  • 《内蒙古自治区无障碍环境建设办法》将于7月1日起施行 2019-10-06
  • “一两黄金一块砖”点泥成“金”的御窑女烧砖人 2019-10-03
  • 40载情定广彩 终练就“国大师” 2019-10-03
  • 史诗歌剧《鉴真东渡》首度唱响宝岛 2019-09-30
  • XC60促销钜惠中南方亦庄沃尔沃-北京中汽南方 2019-09-23
  • 熬夜看球警惕三大系统病 2019-09-11
  • 对市人民政府推进民生基础设施项目、解决历史遗留问题情况开展专题询问 2019-09-11
  • 毕业季多地加入“抢人大战”  专家:毕业生要做能捕食的鸟 2019-09-09
  • 商务部新闻发言人就美白宫6月18日声明发表谈话 2019-09-04
  • 随着科技的发展,人们获得信息的渠道越来越多,越来越方便。刘少奇同志说过:“你们的笔,是人民的笔,你们是党和人民的耳目喉舌。”愿人民日报做好党和人民的喉舌,越办越 2019-09-04
  • 刘谦亮相第十届海峡论坛 展现魔术魅力 2019-08-30
  • 正确看待我国社会主要矛盾转化 2019-08-30
  • 精选栏目: 装机必备 专题大全 常用工具 系统集锦

    最快广东南粤风彩36选7:HTML中select标签单选多选用法详解

    栏目: HTML教程 已有人学习|编辑:admin; 来源:未知;
    select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 <select> 表单数据提交给服务器时包括 name 属性。 

    一、基本用法: 

    复制代码
    代码如下:

    <select> 
    <option value ="volvo">Volvo</option> 
    <option value ="saab">Saab</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
    </select> 

    其中,</option>标签可以省掉,在页面中用法 

    复制代码
    代码如下:

    <SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> 
    <OPTION VALUE="0">全部 
    <OPTION VALUE="1">湖北电大网络学习中心 
    <OPTION VALUE="2">成都师范学院网络学习中心 
    <OPTION VALUE="3">武汉职业技术学院网络学习中心 
    </SELECT> 

    二、Select元素还可以多选,看如下代码: 

    复制代码
    代码如下:

    //有multiple属性,则可以多选 
    <select name= “education” id=”education” multiple=”multiple”> 
    <option value=”1”>高中</option> 
    <option value=”2”>大学</option> 
    <option value=”3”>博士</option> 
    </select> 
    //下面没有multiple属性 , 只显示一条,不能多选 
    <select name= “education” id=”education” > 
    <option value=”1”>高中</option> 
    <option value=”2”>大学</option> 
    <option value=”3”>博士</option> 
    </select> 
    //下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据,注意不能多选的。 
    <select name="education" id="education" size='3'> 
    <option value="0">小学</option> 
    <option value="1">初中</option> 
    <option value="2">高中</option> 
    <option value="3">中专</option> 
    <option value="4">大专</option> 
    <option value="5">本科</option> 
    <option value="6">研究生</option> 
    <option value="7">博士</option> 
    <option value="8">博士后</option> 
    <option selected>请选择</option> 
    </select> 

    三、多选Select组件涉及的所有常用操作: 

    1. 判断select选项中是否存在指定值的Item 

    复制代码
    代码如下:

    @param objSelectId 将要验证的目标select组件的id 
    @param objItemValue 将要验证是否存在的值 
    function isSelectItemExit(objSelectId,objItemValue) { 
    var objSelect = document.getElementById(objSelectId); 
    var isExit = false; 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    for(var i=0;i<objSelect.options.length;i++) { 
    if(objSelect.options[i].value == objItemValue) { 
    isExit = true; 
    break; 



    return isExit; 

    2.向select选项中加入一个Item 

    复制代码
    代码如下:

    @param objSelectId 将要加入item的目标select组件的id 
    @param objItemText 将要加入的item显示的内容 
    @param objItemValue 将要加入的item的值 
    function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 
    var objSelect = document.getElementById(objSelectId); 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    //判断是否该值的item已经在select中存在 
    if(isSelectItemExit(objSelectId,objItemValue)) { 
    $.messager.alert('提示消息','该值的选项已经存在!','info'); 
    } else { 
    var varItem = new Option(objItemText,objItemValue); 
    objSelect.options.add(varItem); 



    3.从select选项中删除选中的项,支持多选多删 

    复制代码
    代码如下:

    @param objSelectId 将要进行删除的目标select组件id 
    function removeSelectItemsFromSelect(objSelectId) { 
    var objSelect = document.getElementById(objSelectId); 
    var delNum = 0; 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    for(var i=0;i<objSelect.options.length;i=i+1) { 
    if(objSelect.options[i].selected) { 
    objSelect.options.remove(i); 
    delNum = delNum + 1; 
    i = i - 1; 


    if (delNum <= 0 ) { 
    $.messager.alert('提示消息','请选择你要删除的选项!','info'); 
    } else { 
    $.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info'); 



    4.从select选项中按指定的值删除一个Item 

    复制代码
    代码如下:

    @param objSelectId 将要验证的目标select组件的id 
    @param objItemValue 将要验证是否存在的值 
    function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
    var objSelect = document.getElementById(objSelectId); 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    //判断是否存在 
    if(isSelectItemExit(objSelect,objItemValue)) { 
    for(var i=0;i<objSelect.options.length;i++) { 
    if(objSelect.options[i].value == objItemValue) { 
    objSelect.options.remove(i); 
    break; 


    $.messager.alert('提示消息','成功删除!','info'); 
    } else { 
    $.messager.alert('提示消息','不存在指定值的选项!','info'); 



    5.清空select中的所有选项 

    复制代码
    代码如下:

    @param objSelectId 将要进行清空的目标select组件id 
    function clearSelect(objSelectId) { 
    var objSelect = document.getElementById(objSelectId); 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    for(var i=0;i<objSelect.options.length;) { 
    objSelect.options.remove(i); 



    6. 获取select中的所有item,并且组装所有的值为一个字符串,值与值之间用逗号隔开 

    复制代码
    代码如下:

    @param objSelectId 目标select组件id 
    @return select中所有item的值,值与值之间用逗号隔开 
    function getAllItemValuesByString(objSelectId) { 
    var selectItemsValuesStr = ""; 
    var objSelect = document.getElementById(objSelectId); 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    var length = objSelect.options.length 
    for(var i = 0; i < length; i = i + 1) { 
    if (0 == i) { 
    selectItemsValuesStr = objSelect.options[i].value; 
    } else { 
    selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; 



    return selectItemsValuesStr; 

    7. 将一个select中的所有选中的选项移到另一个select中去 

    复制代码
    代码如下:

    @param fromObjSelectId 移动item的原select组件id 
    @param toObjectSelectId 移动item将要进入的目标select组件id 
    function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
    var objSelect = document.getElementById(fromObjSelectId); 
    var delNum = 0; 
    if (null != objSelect && typeof(objSelect) != "undefined") { 
    for(var i=0;i<objSelect.options.length;i=i+1) { 
    if(objSelect.options[i].selected) { 
    addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 
    objSelect.options.remove(i); 
    i = i - 1; 




    8. 将一个select中的所有选项移到另一个select中去 

    复制代码
    代码如下:

    @param fromObjSelectId 移动item的原select组件id 
    @param toObjectSelectId 移动item将要进入的目标select组件id 
    function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 
    var objSelect = document.getElementById(fromObjSelectId); 
    if (null != objSelect) { 
    for(var i=0;i<objSelect.options.length;i=i+1) { 
    addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 
    objSelect.options.remove(i); 
    i = i - 1; 


     

    本文地址://www.zqln.net/bc/HTML/16443.html
    本文标签:select标签
    评论
  • 回复@大雨582:建议你学学需求层次理论…… 2019-10-16
  • 征稿:“改革印记”邀您讲述中国发展故事 2019-10-16
  • 凤凰古城端午抢鸭子大战引万人围观 2019-10-06
  • 《内蒙古自治区无障碍环境建设办法》将于7月1日起施行 2019-10-06
  • “一两黄金一块砖”点泥成“金”的御窑女烧砖人 2019-10-03
  • 40载情定广彩 终练就“国大师” 2019-10-03
  • 史诗歌剧《鉴真东渡》首度唱响宝岛 2019-09-30
  • XC60促销钜惠中南方亦庄沃尔沃-北京中汽南方 2019-09-23
  • 熬夜看球警惕三大系统病 2019-09-11
  • 对市人民政府推进民生基础设施项目、解决历史遗留问题情况开展专题询问 2019-09-11
  • 毕业季多地加入“抢人大战”  专家:毕业生要做能捕食的鸟 2019-09-09
  • 商务部新闻发言人就美白宫6月18日声明发表谈话 2019-09-04
  • 随着科技的发展,人们获得信息的渠道越来越多,越来越方便。刘少奇同志说过:“你们的笔,是人民的笔,你们是党和人民的耳目喉舌。”愿人民日报做好党和人民的喉舌,越办越 2019-09-04
  • 刘谦亮相第十届海峡论坛 展现魔术魅力 2019-08-30
  • 正确看待我国社会主要矛盾转化 2019-08-30
  • 数学破解彩票漏洞 大无限彩票99937_com网页 纸牌推牌9的玩法和规则 七乐彩走势图一综合板 体彩31选7中4个多少钱 搜狐彩票开奖信息 快三官网投注 海南飞鱼彩票怎么玩 江西快三开奖 时时彩彩群 七星彩专家预测号码 内部泄密四肖中特 牛牛手机 超级大乐透北京中奖 3d侠为什么不能用了