<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="utf-8"/>

        <title>针对选择框词典式排序</title>

        <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

        <script type="text/javascript">

            $(function() {

                /*$('button').click(function() {

                    var options = $('option');

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

                        for (var j = 0; j < i; j++) {

                            var currOption = $(options.get(i)),

                                loopOption = $(options.get(j));

                            if (currOption.text() < loopOption.text()) {

                                currOption.insertBefore(loopOption);

                            }

                        }

                    }

                });*/

                $('button').click(function() {

                    var $options = $('option');

                    $options.sort(function(a, b) {

                        if ($(a).text() > $(b).text()) return 1;

                        else return -1;

                    });

                    $('select').html($options);

                });

            });

        </script>

    </head>

    <body>

        <button>排序</button>

        <select>

            <option>php</option>

            <option>c</option>

            <option>javascript</option>

            <option>css</option>

            <option>html</option>

            <option>python</option>

        </select>

    </body>

</html>

[jQuery编程挑战]004 针对选择框词典式排序的更多相关文章

  1. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  2. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  3. jquery如何实现动态增加选择框

    jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...

  4. JQuery Mobile - 动态修改select选择框的选中项

    <label for="day">选择天</label> <select name="day" id="day" ...

  5. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  6. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  7. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

  8. [jQuery编程挑战]008 生成逗号分隔数字

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. [jQuery编程挑战]007 切换数据表格的行列

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 了解开源的许可证GPL、LGPL、BSD、Apache 2.0的区别 【转】

    原文来自:http://blog.sina.com.cn/s/blog_6870d1e00100lhlv.html 你对开源有多少了解呢?如果你是软件开发者,要开源软件,不单单是开放源代码就可以了,选 ...

  2. top N彻底解秘

    本博文内容: 1.基础Top N算法实战 2.分组Top N算法实战 3.排序算法RangePartitioner内幕解密 1.基础Top N算法实战 Top N是排序,Take是直接拿出几个元素,没 ...

  3. Java HexString

    byte[]和十六进制字符串相互转换 Java中byte用二进制表示占用8位,而我们知道16进制的每个字符需要用4位二进制位来表示. 所以我们就可以把每个byte转换成两个相应的16进制字符,即把by ...

  4. 【UVA】11732 - strcmp() Anyone?

    一開始不知道这样的一维建树方法. 每次一层用一个链指向下一层最左边的结点,之后每一层用一个链表串联全部的结点,这样就建树成功了. 14328524 11732 option=com_onlinejud ...

  5. hdu 3729 I'm Telling the Truth 二分图匹配

    裸的二分图匹配.需要输出方案. #include<cstdio> #include<cstring> #include<vector> #include<al ...

  6. Java语言基础（六）

    Java语言基础(六) 前一章提到的, BigDecimal, DecimalFormat等具体用法,这里就不在说了,网上有许多 一.下面让我们看一个例子(自由落体运动位移) 说明: (1).公式是 ...

  7. tcmalloc源码剖析的资料

    1. https://seanhn.wordpress.com/2011/04/14/exploit-necromancy-in-tcmalloc-reviving-the-4-to-n-byte-o ...

  8. Call Directory Extension 初探

    推荐序 本文介绍了 iOS 10 中的 Call Directory Extension 特性,并且最终 Demo 出一个来电黑名单的 App. 作者:余龙泽,哈工大软件工程大四学生,之前在美图公司实 ...

  9. javascript 高级程序设计（二）-在html中使用javascript

    <script> async 可选 charset 可选 defer 可选 language 已废弃 src 可选 type 可选

  10. unity介绍