Form中的Select控件不支持对选择项(Option)的排序,下面我将对Option中value属性值进行排序,并调整每个Option排序后的位置,具体代码如下(这里假设每个Option中的value与其中的text内容相同):
该函数运用了Array(数组)对象的排序(sort)方法,实现了Select排序。
function sortMe(oSel){
var ln = oSel.options.length;
var arr = new Array(); // 这是关键部分
// 将select中的所有option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{
// 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;
arr[i] = oSel.options[i].value;
}
arr.sort(); // 开始排序
// 清空Select中全部Option
while (ln--)
{
oSel.options[ln] = null;
}
// 将排序后的数组重新添加到Select中
for (i = 0; i < arr.length; i++)
{
oSel.add (new Option(arr[i], arr[i]));
}
}
</script>
下面的示例演示了一个按升序排序的select
function sortMe(oSel){
var ln = oSel.options.length;
var arr = new Array();
for (var i = 0; i
bathroom
article
bath
art
cuteHtml
cute
分享到:
相关推荐
在提供的`demo.html`文件中,可能包含了一个实际的示例,演示了如何在页面上使用上述方法对`<select>`的`<option>`进行排序。你可以打开这个文件查看具体的实现和效果。不过,由于该文件内容未直接给出,这里无法给...
此外,如果项目中包含`ListItemMove`文件,这可能是一个示例代码或测试用例,用于演示以上功能的实际实现。通过查看这些文件,你可以更深入地理解这个功能的工作原理和具体实现细节。 总之,通过结合JavaScript和...
在网页开发中,下拉选择框(`<select>`)是一种常见的表单控件,用于让用户从多个预设选项中选择一个或多个值。当这些选项数量较多时,为了提高用户体验,通常会希望按照某种逻辑顺序对它们进行排序。然而,默认情况下...
在示例代码中,有一个包含五个选项的`<select>`元素,以及两个上移和下移的图片按钮,分别调用`UpOrDown`和`UpOrDown2`函数。用户可以通过点击按钮来改变选中选项的顺序,这使得用户界面更加交互友好。 总的来说,...
`select2.sortable`就是为了解决这一问题而诞生的一个库,它巧妙地结合了`select2`和`html5sortable`这两个强大的工具,使得我们可以轻松地对多选列表进行排序操作。这篇文章将深入探讨这两个库的功能、如何整合它们...
以下是一个简单的实现示例: 1. HTML 结构: ```html <select id="mySelect"> <!-- 选项列表 --> </select> 上移 下移 ``` 2. jQuery 代码实现: ```javascript $(document).ready(function() { var $select =...
然后,我们需要监听`select1`的`change`事件,当用户在第一个下拉框中做出选择时,触发AJAX请求。在JavaScript中,我们可以这样编写: ```javascript document.getElementById('select1').addEventListener('change...
提供的`SelectDemo`可能是一个实际的代码示例,包含了如何在项目中创建和使用`Select`列表的实践案例。通常,这样的示例会包含HTML结构、CSS样式以及JavaScript交互逻辑。 7. **扩展话题**: - **动态加载**:当...
对于下拉列表中的选项,可以先将 `option` 转换为数组,再进行排序,最后更新到 `select` 中: ```javascript var options = Array.from(document.getElementById('selectId').options); options.sort(function(a...
- HTML结构:创建一个带有多个`<option>`的`<select>`元素,给它添加一个特殊的类(如"class='select duel'")。 - 初始化插件:在DOM加载完成后,通过jQuery选择器找到`<select>`元素,然后调用`.bootstrapDual...
jQuery超级Select插件v4.0版本是一个强大且灵活的工具,它为Web开发者提供了丰富的功能和定制选项,帮助提升Select元素的用户体验。通过深入理解和合理运用,开发者可以构建出更加便捷、高效的表单交互。无论是在...
`IN`子句用于判断某列的值是否在一个指定的集合中。 - **示例**:查找城市为London、Paris或Berlin的客户。 ```sql SELECT CustomerID, CompanyName, ContactName, City FROM Customers WHERE City IN ('...
以下是一个简单的使用示例: ```html <!DOCTYPE html> <title>jQuery Multi Select <link rel="stylesheet" href="css/multi-select.css"> <script src="js/jquery.min.js"></script> ...
在HTML中,`<select>`标签用于创建一个下拉列表,而`<option>`标签则定义了列表中的各个选项。为了实现单选,通常每个`<option>`都有一个`selected`属性,只有一个可以被设置为`true`。对于多选,`<select>`需要添加...
在数据恢复过程中,为了保证选项顺序的一致性,需要一个排序函数`sort_Main`来将移除的option按照原有的顺序重新插入到Select中。该函数通过遍历保存的`Item_org`数组,按照value和text属性对辅助Select中的option...
- **`WITH OWNER ACCESS OPTION`** 是一个较少见的选项,用于控制对某些特定数据的访问权限。 #### 二、数据过滤与限制 - **`ALL`** 谓词默认返回所有符合条件的记录。 - **`DISTINCT`** 谓词确保结果集中不会出现...
这个下拉列表可以通过`<select>`标签创建,每个城市作为一个`<option>`子元素。此外,还可能包含一个JavaScript脚本链接,用于加载和执行排序逻辑。 接着,`js`文件是整个功能的核心。它主要负责处理用户输入、获取...
4. **重新构建`<select>`**: 清空原有的`<option>`项,并根据排序后的数组重新构建新的`<option>`项并添加到`<select>`元素中。 **代码示例** ```javascript function st(a, b) { if (a > b) return -1; else if...
以下是一个简单的示例: ```html <!-- 省份数据 --> var provinces = [ {name: "北京市", code: "110000"}, {name: "天津市", code: "120000"}, // ...其他省份... ]; // 按照省份名称排序 provinces.sort...