`
happmaoo
  • 浏览: 4473686 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

排序Select中Option项的一个示例

 
阅读更多

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
分享到:
评论

相关推荐

    JS 将select options 排序

    在提供的`demo.html`文件中,可能包含了一个实际的示例,演示了如何在页面上使用上述方法对`&lt;select&gt;`的`&lt;option&gt;`进行排序。你可以打开这个文件查看具体的实现和效果。不过,由于该文件内容未直接给出,这里无法给...

    java Script ,jquery 写的 select 中的option 左右移动,上下移动

    此外,如果项目中包含`ListItemMove`文件,这可能是一个示例代码或测试用例,用于演示以上功能的实际实现。通过查看这些文件,你可以更深入地理解这个功能的工作原理和具体实现细节。 总之,通过结合JavaScript和...

    javascript select options 排序(保持option 对象完整性)

    在网页开发中,下拉选择框(`&lt;select&gt;`)是一种常见的表单控件,用于让用户从多个预设选项中选择一个或多个值。当这些选项数量较多时,为了提高用户体验,通常会希望按照某种逻辑顺序对它们进行排序。然而,默认情况下...

    JS实现Select的option上下移动的方法

    在示例代码中,有一个包含五个选项的`&lt;select&gt;`元素,以及两个上移和下移的图片按钮,分别调用`UpOrDown`和`UpOrDown2`函数。用户可以通过点击按钮来改变选中选项的顺序,这使得用户界面更加交互友好。 总的来说,...

    select2.sortable:结合 select2 和 html5sortable 排序多选择列表真棒!

    `select2.sortable`就是为了解决这一问题而诞生的一个库,它巧妙地结合了`select2`和`html5sortable`这两个强大的工具,使得我们可以轻松地对多选列表进行排序操作。这篇文章将深入探讨这两个库的功能、如何整合它们...

    jQuery Select 上移下移

    以下是一个简单的实现示例: 1. HTML 结构: ```html &lt;select id="mySelect"&gt; &lt;!-- 选项列表 --&gt; &lt;/select&gt; 上移 下移 ``` 2. jQuery 代码实现: ```javascript $(document).ready(function() { var $select =...

    最简单的下拉框联动不刷新页面示例

    然后,我们需要监听`select1`的`change`事件,当用户在第一个下拉框中做出选择时,触发AJAX请求。在JavaScript中,我们可以这样编写: ```javascript document.getElementById('select1').addEventListener('change...

    Select列表菜单

    提供的`SelectDemo`可能是一个实际的代码示例,包含了如何在项目中创建和使用`Select`列表的实践案例。通常,这样的示例会包含HTML结构、CSS样式以及JavaScript交互逻辑。 7. **扩展话题**: - **动态加载**:当...

    checkbox select应用

    对于下拉列表中的选项,可以先将 `option` 转换为数组,再进行排序,最后更新到 `select` 中: ```javascript var options = Array.from(document.getElementById('selectId').options); options.sort(function(a...

    Jquery双向select控件Bootstrap Dual Listbox

    - HTML结构:创建一个带有多个`&lt;option&gt;`的`&lt;select&gt;`元素,给它添加一个特殊的类(如"class='select duel'")。 - 初始化插件:在DOM加载完成后,通过jQuery选择器找到`&lt;select&gt;`元素,然后调用`.bootstrapDual...

    jquery 超级select插件 v4.0版本

    jQuery超级Select插件v4.0版本是一个强大且灵活的工具,它为Web开发者提供了丰富的功能和定制选项,帮助提升Select元素的用户体验。通过深入理解和合理运用,开发者可以构建出更加便捷、高效的表单交互。无论是在...

    SELECT语句的完整语法 可参考资料

    `IN`子句用于判断某列的值是否在一个指定的集合中。 - **示例**:查找城市为London、Paris或Berlin的客户。 ```sql SELECT CustomerID, CompanyName, ContactName, City FROM Customers WHERE City IN ('...

    jQuery多选下拉框插件

    以下是一个简单的使用示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery Multi Select &lt;link rel="stylesheet" href="css/multi-select.css"&gt; &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; ...

    selectList控件 的单选复选移动

    在HTML中,`&lt;select&gt;`标签用于创建一个下拉列表,而`&lt;option&gt;`标签则定义了列表中的各个选项。为了实现单选,通常每个`&lt;option&gt;`都有一个`selected`属性,只有一个可以被设置为`true`。对于多选,`&lt;select&gt;`需要添加...

    js简单实现Select互换数据的方法

    在数据恢复过程中,为了保证选项顺序的一致性,需要一个排序函数`sort_Main`来将移除的option按照原有的顺序重新插入到Select中。该函数通过遍历保存的`Item_org`数组,按照value和text属性对辅助Select中的option...

    select语句详解

    - **`WITH OWNER ACCESS OPTION`** 是一个较少见的选项,用于控制对某些特定数据的访问权限。 #### 二、数据过滤与限制 - **`ALL`** 谓词默认返回所有符合条件的记录。 - **`DISTINCT`** 谓词确保结果集中不会出现...

    js模拟携程网按字母排序城市选择效果.zip

    这个下拉列表可以通过`&lt;select&gt;`标签创建,每个城市作为一个`&lt;option&gt;`子元素。此外,还可能包含一个JavaScript脚本链接,用于加载和执行排序逻辑。 接着,`js`文件是整个功能的核心。它主要负责处理用户输入、获取...

    javascript select列表内容按字母倒序排序与按列表倒序排列

    4. **重新构建`&lt;select&gt;`**: 清空原有的`&lt;option&gt;`项,并根据排序后的数组重新构建新的`&lt;option&gt;`项并添加到`&lt;select&gt;`元素中。 **代码示例** ```javascript function st(a, b) { if (a &gt; b) return -1; else if...

    带有code值的省份选择按照字母排序

    以下是一个简单的示例: ```html &lt;!-- 省份数据 --&gt; var provinces = [ {name: "北京市", code: "110000"}, {name: "天津市", code: "120000"}, // ...其他省份... ]; // 按照省份名称排序 provinces.sort...

Global site tag (gtag.js) - Google Analytics