多选Select排序

 

根据下拉框的选择排序


///
初始化排序框

///GroupMakeUp_UserID,待排序的框的实例

///sel,排序选择框

///

function InitSortCombox(GroupMakeUp_UserID, sel) {

    if (sel != "undefine" && sel != null) {

        var GroupMakeUp_UserIDSort = document.getElementById(sel);

        //首先清空原有的值

        GroupMakeUp_UserIDSort.options.length = 0;

        CreateOption(GroupMakeUp_UserIDSort, "请选择", "0");

        for (j = 0; j < GroupMakeUp_UserID.options.length; j++) {

            //GroupMakeUp_UserIDSort中添加项(排序框)

            var s = GroupMakeUp_UserID.options[j].value.split("|");

            if (Exists(GroupMakeUp_UserIDSort, s[0])) {

                CreateOption(GroupMakeUp_UserIDSort, s[1], s[0]);

            }

        }

    }

}

 

///排序

function Sort_GroupMakeUp_UserID(param, src) {

    var oSel = document.getElementById(src);

 

    // alert(param.value);

    var arr = new Array(); // 这是关键部分

    // select中的所有optionvalue值将保存在Array

    for (var i = 0; i < oSel.options.length; i++) {

        // 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;

        arr[i] = { key: oSel.options[i].innerText, value: oSel.options[i].value };

    }

    //js Array排序

    arr.sort(function(a, b) { return a.value.indexOf(param.value) == -1 ? 1 : -1; }); // 开始排序

    // 清空Select中全部Option

    oSel.options.length = 0;

 

    // 将排序后的数组重新添加到Select

    for (i = 0; i < arr.length; i++) {

        CreateOption(oSel, arr[i].key, arr[i].value);

    }

}

 

//是否已经存在

function Exists(src, param) {

    for (e = 0; e < src.options.length; e++) {

        if (src.options[e].value == param) {

            return false;

        }

    }

    return true;

}

//创建新的OPTION对象

function CreateOption(src, text, value) {

    var oOption = document.createElement("OPTION");

    src.options.add(oOption);

    oOption.innerText = text;

    oOption.value = value;

}

 

转载于:https://www.cnblogs.com/jimtomjim/archive/2009/08/21/1551542.html

### 回答1: 在HTML中,我们可以使用select元素来创建一个下拉菜单,并且可以设置为多选的形式。要实现多选下拉菜单,我们可以通过给select元素添加multiple属性来实现。 下面是一个示例的代码: ```html <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> ``` 在这个例子中,我们给select元素添加了multiple属性,表示该下拉菜单可以进行多选。用户可以通过按住Ctrl键(在Windows操作系统中)或者Command键(在Mac操作系统中)来选择多个选项。 当我们提交表单或者处理表单数据时,可以使用JavaScript或者服务器端脚本来获取用户所选择的多个选项的多选下拉菜单能够提供更大的灵活性,使用户能够选择多个选项进行操作。但需要注意的是,在某些情况下,多选下拉菜单可能会对用户界面造成一些混淆,因此在设计时需要谨慎考虑使用多选下拉菜单的场景。 ### 回答2: HTML中的select元素是用于创建下拉选择框的,多选功能是通过设置select元素的multiple属性来实现的。当设置multiple属性为"multiple"时,用户可以在选择框中按住Ctrl键或Shift键来选择多个选项。 下面是一个基本的多选select代码示例: ```html <select multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> </select> ``` 在上面的示例中,multiple属性被设置为"multiple",这将允许用户选择多个选项。用户可以单击选项并按住Ctrl键以选择多个非连续选项,或按住Shift键来选择多个连续选项。 当用户选择了多个选项后,可以使用JavaScript来获取所选择的选项的。例如,以下代码段可以获取所选选项的: ```javascript var select = document.querySelector('select'); var selectedValues = Array.from(select.selectedOptions).map(option => option.value); console.log(selectedValues); ``` 通过上述的代码,我们可以获得一个包含所选选项的数组,可以在JavaScript中进一步处理和使用这些。 需要注意的是,多选select在不同浏览器下的样式可能会有所不同。有些浏览器会将多选框显示为下拉列表,而有些浏览器可能会将其显示为一个可滚动的框,具体显示效果取决于浏览器的实现。 ### 回答3: HTML中的<select>元素可以用来创建下拉框选择框,同时支持多选功能。在<select>标签中添加multiple属性,即可实现多选功能。 例如: <select multiple> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> 上述代码中的<select>标签添加了multiple属性,表示可以多选。每个<option>标签表示一个可选择的选项,通过在value属性中设置,可以在后台代码中获取选中的选项。 在多选模式下,用户可以按住Ctrl键(在Windows系统中)或Command键(在Mac系统中)同时点击选项来进行多选。在提交表单时,可以通过在后台的服务器脚本或JavaScript中处理选中的选项,以便进行进一步的处理。 需要注意的是,多选模式下,可以选择多个选项,但无法保证这些选项的顺序。因此,在处理多选时,需要根据具体需求进行排序或其他操作。 另外,可以通过CSS样式来修改<select>元素的外观,例如修改字体、背景色、边框等属性,以便与页面的整体设计相协调。 总之,HTML的<select>元素可以通过添加multiple属性实现多选功能,为用户提供了灵活的选择方式,并方便后台代码进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值