<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js select's option排序</title>
<script type="text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
//排序算法
function sortOPtions(oSel){
var ln = oSel.options.length;
var arr = []; //关键就是定义的这个数组
//将select中的所有option的text值将保存在数组arr中
for (var i = 0; i < ln; i++)
{
//如果需要对option中的value排序，可以改为arr[i] = oSel.options[i].text;
arr[i] = oSel.options[i].text;
}
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]));
}
}
//触发下拉框的onchange事件
function alertValue (sele){
window.alert(sele.value);
}
$(document).ready(function(){
//给按钮绑定事件
$("#btn").click(function(){
sortOPtions(document.getElementById("sel"));
});
});
</script>
</head>
<body>
<select id="sel" onchange="alertValue(this);">
<option value="BMSCC_01">BMSCC_01</option>
<option value="BMSCC_02">BMSCC_02</option>
<option value=""></option>
<option value="BMSCC_03">BMSCC_03</option>
<option value="BMSCC_04">BMSCC_04</option>
</select>
<hr>
<input type="button" value="排序" id="btn" />
</body>
</html>
分享到：
相关推荐
`<select>` 元素用于创建下拉列表，而`<option>`元素则是下拉列表中的可选项。在JavaScript中，我们可以通过DOM（Document Object Model）接口来操作这些元素。 要对`<select>`中的`<option>`进行排序，我们需要...
在这个案例中，我们将使用`<select>`元素创建下拉列表，让用户可以滚动选择。 ```html 请选择: <select id="pinyinSelect"> <!-- 下拉选项将在这里动态添加 --> </select> ``` 接着，我们用JavaScript处理...
在网页设计中，`<select>`元素用于创建下拉列表，常常用于提供多个选项供用户选择。当需要对这些选项进行动态排序，比如允许用户通过上下移动来调整选项的顺序时，就需要用到“select框上下移动排序”的技术。这个...
此外，还可以通过`$("#select_id option").each(function() {...})` 遍历所有的Option，进行更复杂的操作，比如根据条件修改Option的文本、value或者添加类名等。这对于实现动态筛选、排序或分组功能非常有用。 总...
`<select>` 元素用于创建下拉菜单，而`<option>` 是其中的各个选项。例如： ```html <select id="mySelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">...
为此，jQuery提供了一个强大的多选下拉列表插件——jQuery Multiselect。该插件不仅使多选下拉列表更加美观，还提供了丰富的功能和自定义选项，极大地提升了用户体验。 ### 1. 插件介绍 jQuery Multiselect是由...
- **前端框架**：许多前端框架，如Angular、React、Vue.js，都有相应的组件库，提供数据网格下拉列表框控件，如Angular的Material Design中的`mat-select`配合`mat-optgroup`和`mat-option`，或是Element UI的`el-...
标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表（select元素），特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...
- **排序Option**：可以编写一个函数来根据Option的值或文本对Select进行排序，通过循环遍历并调整Option的位置。 了解这些基本操作对于在JavaScript中处理Select元素至关重要，特别是在动态创建和更新表单、实现...
- `Select`元素是HTML中的一个表单控件，用于创建下拉列表。用户可以通过点击下拉箭头来展开选项，然后选择一个或多个选项。 - 在移动应用开发中，`Select`菜单通常被设计为滑动选择器或弹出式列表，以适应较小的...
该文档主要讲述了使用JavaScript语言来实现对网页中下拉列表框（select元素）进行数据项增加、删除以及上下排序的操作。具体涉及到的技术知识点有： 1. JavaScript操作DOM：包括通过JavaScript创建新的option元素、...
在HTML中，下拉列表通常通过`<select>`元素来创建，每个选项则用`<option>`标签表示。例如： ```html <select id="countrySelect"> <option value="">请选择国家</option> </select> ``` 上述代码定义了一个名为...
在JavaScript中，`<select>`元素常常用于创建下拉列表，而`<option>`标签则用于定义下拉列表中的选项。在某些交互式应用中，可能需要用户能够动态调整选项的顺序，例如通过上移或下移选项。本文将探讨如何使用...
- 为了能够按需进行排序，可以在移动到目标下拉列表后，根据需求使用sort()函数对选项进行排序。 - 使用双击事件来实现快速添加和移除选项，可以在select元素上添加ondblclick事件处理器。 4. **多选操作**： - ...
最后，为了提高用户体验，可以考虑添加一些附加功能，例如搜索过滤（在用户输入时自动过滤列表项），或者排序选项（允许用户按照字母顺序或自定义顺序显示列表项）。 在实际应用中，可以通过以下方式使用这个自定义...
该函数通过遍历保存的`Item_org`数组，按照value和text属性对辅助Select中的option进行排序，并将其添加到主Select中。 #### 7. 实现细节 - 使用`window.onload`方法在页面加载完毕后执行初始化函数，获取Select...
在JavaScript中，处理下拉列表（`<select>`元素）是一项常见的任务，涉及到对`<option>`元素的操作。本文将详细解析标题和描述中的代码片段，以及如何在IE和Firefox等浏览器中解决下拉列表的问题。 首先，让我们...
在这个特定的实例中，"下拉菜单"是指在BGrid的某列或者单元格中嵌入了下拉选择器，用户可以通过这个下拉列表来选取预设的选项，从而提高输入效率和用户体验。 首先，下拉菜单的基本结构是由HTML的`<select>`元素...
它将传统的单选下拉框转变为可多选的下拉列表，支持多种自定义样式和交互效果，使得用户在选择多项内容时更加便捷。此外，multiSelect还支持响应式设计，能够适应不同设备的显示需求。 二、基本使用 1. 引入依赖：...
Select 元素用于创建一个下拉列表，用户可以选择其中的一项或多项。在 HTML 中，我们可以通过 `<select>` 标签来定义 Select 元素，通过 `<option>` 标签来添加具体的选项。 例如： ```html <select name="list" ...