2 llx2007 llx2007 于 2015.06.17 16:39 提问

html下拉菜单如何实现,急急~~~求Demo

是这样的,图片说明
我有个id=ox的下拉菜单,我想让他按1时显示全部离线的,按2时显示全部在线的,按全部是显示全部,怎么实现呢,求代码

 var table = $('#mainTable').DataTable(

            {
            //"bSort":true, 
            //"bSort":false, //开关,是否让各列具有按列排序功能
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], //定义每页显示数据数量
            "order": [[ 6, "desc" ]],
            columnDefs:[{
                orderable:false,//禁用排序
                targets:[2,3,4,8]   //指定的列
            }],
            "bFilter": true, //是否使用搜索 
            //"sdom": '<"top"ilp <"clear">>rt<"bottom"pilf<"clear">>', 
            "sDom": '<"top"<"clear">>pt<"bottom"i<"clear">><"clear">',//改变页面上元素的位置,同时可以添加div元素。
            "bPaginate" : true, //是否显示(应用)分页器 
    //      "bProcessing": true, //开启读取服务器数据时显示正在加载中……
            "sPaginationType" : "four_button", //详细分页组,可以支持直接跳转到某页  
            "oLanguage": { //国际化配置  
                    "sProcessing" : "正在获取数据,请稍后...",    
                    "sLengthMenu" : "显示 _MENU_ 条",    
                    "sZeroRecords" : "没有您要搜索的内容",    
                    "sInfo" : "共_TOTAL_条记录, 当前第_PAGE_页,共有_PAGES_页",    
                    "sInfoEmpty" : "记录数为0",    
                    "sInfoFiltered" : "(全部记录数 _MAX_ 条)",    
                    "sInfoPostFix" : "",    
                    "sSearch" : "搜索",    
                    "sUrl" : "" ,   
                     "oPaginate": {    
                        "sFirst" : "首页",    
                        "sPrevious" : "上页",    
                        "sNext" : "下页",    
                        "sLast" : "末页"    
                    }   
                },

                "fnDrawCallback": function() {

                        progress0();

                        progress1();

                        progress2();

                        progress3();

                        progress4();

                        progress5();

                        progress6();

                        progress7();

                        progress8();

                        progress9();

                        progress10();

                        progress11();

                        progress12();

                        progress13();

                        progress14();

                        progress15();

                        progress16();

                        progress17();

                        progress18();

                        progress19();

                        progress20();

                        progress21();

                        progress22();

                        progress23();

                        progress24();

                        progress25();

                        progress26();

                        progress27();

                        progress28();

                        progress29();

                        progress30();

                        progress31();

                        progress32();

                        progress33();

                        progress34();

                        progress35();

                        progress36();

                        progress37();

                        progress38();

                        progress39();

                        progress40();

                        progress41();

                        progress42();

                        progress43();

                        progress44();

                        progress45();

                        progress46();

                        progress47();

                 }
        }); 


        $("#allSearch").on( 'keyup change', function () {
            var table = $('#mainTable').DataTable();
            //alert($(this).val());
            table
            .search( $(this).val() )
            .draw(); 
        } );

        $('#ox').change( function () {
            //alert($(this).val());
            var table = $('#mainTable').DataTable();
            table
            .column(5)
            .search( $(this).val() )
            .draw(); 
        } );

        $('#oxygenstate').change( function () {
            //alert($(this).val());
            var table = $('#mainTable').DataTable();
            table
            .column(9)
            .search( $(this).val() )
            .draw(); 
        } );

        } );
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html 下拉列表联动展示数据Demo
html 下拉列表 联动选择 展示数据Demo 类似可以实现地址选择
jQuery实现下拉菜单
html文件&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;下拉菜单&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; type=&quot;
HTML+CSS实现简单下拉菜单
HTML+CSS实现下拉菜单 使用Html+css实现简单的下拉菜单 代码: 下拉框 *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{ float:left; line-height:40px; tex
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果:
HTML+CSS+JavaScript实现简易下拉菜单
html lang="en"> head> meta charset="UTF-8"> title>下拉列表title> link rel="stylesheet" href="css/reset.css" type="text/css"> style type="text/css"> *{ padding: 0;
circle类的实现
circle类的实现 斤斤计较急急急急急急急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急
jmeter使用说明
jmeter使用说明 主要是对jemet进行压测时候回急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急
下拉菜单的两种实现方式:CSS和JS
下拉菜单的简单介绍、源代码以及可能出现相关问题
css3实现下拉框动画效果
HTML:<div class="content"> <div class="select"> <p>所有选项</p> <ul> <li data-value="所有选项" class="selected">所有选项</li> <li data-value="html">html</li>
js实现省份下拉菜单
要求: 2个下来框,选择1级菜单后,2级菜单出现相应的备选项。如果没有选择则不能提交。 先创建html文件<!DOCTYPE html> <html> <head> <title></title> </head> <body> <form> <select id="province"> <option selected="selected"