• 技术文章 >web前端 >html教程

    HTML中select标签单选多选用法详解_HTML/Xhtml_网页制作

    2016-05-16 16:37:42原创1362
    select 元素可创建单选或多选菜单。当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将






    其中,标签可以省掉,在页面中用法

    复制代码
    代码如下:



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

    复制代码
    代码如下:

    //有multiple属性,则可以多选

    //下面没有multiple属性 , 只显示一条,不能多选

    //下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据,注意不能多选的。


    三、多选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;iif(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;iif(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;iif(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;iobjSelect.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;iif(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;iaddOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
    objSelect.options.remove(i);
    i = i - 1;
    }
    }
    }
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML select标签 单选 多选
    上一篇:定义span的最小高度没有效果的解决方法_HTML/Xhtml_网页制作 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ExtJs教程16(上)• html +CSS+div学习――第二课_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose• Codeforces Round #275 (Div. 2) C• javascript简单事件处理
    1/1

    PHP中文网