`

较好的下拉菜单

阅读更多
var cp = "";
$(function() {
    cp = $('#checknossdata').val();
    var url = cp+"/noss/page/nossdatainfo/getTableRuleNameListforJson.do";
    initialTrans(url,{tableruleFlag:1}, $('#tablerule'));
    initialTrans(url,{tableruleFlag:0}, $('#partrule'));
//  级联写法
// $('#tans_type').change(function() {
//        var parent_id = $(this).val();
//        var sel_obj = $("#tans_prof");
//        var param = {menu_level:2,parent_id:parent_id};
//        removeOption($("#tans_busi"));
//        initialTrans(url,param, sel_obj);
//    });

}) ;

/**
* 初始化级联数据
* @param obj        下拉列表对象
*/
function initialTrans(url,param,obj) {
    removeOption(obj);
    $.post(
        url,
        param,
        function(data) {
            $.each(data, function(i,n) {
                var op = optionStr(n.tablerule_id, n.tablerule_name);
                obj.append(op);
            });
        },
        "json"
    )
}
//删除option元素
function removeOption(obj) {
    obj.find("option").each(function(i) {
        if(i > 0) {
            $(this).remove();
        }
    });
}
//动态生成option字符串
function optionStr(value,text) {
     var option = "<option value='"+value+"'>"+text+"</option>";
    return option;
}
分享到:
评论

相关推荐

    Web弹出下拉菜单

    - 对于移动设备,可能需要调整下拉菜单的样式和交互方式,以适应较小的屏幕。可以使用媒体查询(`media queries`)来根据设备的视口宽度应用不同的CSS规则。在触摸设备上,可以使用`touchstart`和`touchend`事件来...

    横向下拉菜单源码

    "横向下拉菜单"是一种创新的交互设计,它打破了传统的垂直下拉菜单模式,为用户提供了独特的操作体验。这种设计常见于网页、应用程序或者桌面软件中,尤其是在空间有限但选项较多的情况下,能有效地节省屏幕空间并...

    ios-下拉菜单的选择.zip

    在iOS开发中,下拉菜单通常用于为用户提供一组可选择的选项,这些选项可以在有限的屏幕空间内展示。本示例“ios-下拉菜单的选择.zip”可能包含一个简单的按钮触发下拉菜单的实现,名为“ButtonDemo”。下面将详细...

    jquery红色商城导航下拉菜单.zip

    《jQuery红色商城导航下拉菜单实现详解》 在网页设计中,导航菜单是不可或缺的元素,它引导用户方便快捷地找到所需信息。本教程将详细讲解如何利用jQuery技术实现一款红色商城风格的导航下拉菜单,让您的网站更加...

    纯css的导航下拉菜单

    - 由于整个导航菜单仅使用CSS实现,因此具有较好的浏览器兼容性。但需要注意的是,某些老旧浏览器可能不支持某些CSS3特性,如`position:absolute;`、`:hover`伪类等,因此在实际应用时还需测试不同浏览器下的表现。...

    select 分组下拉菜单自定义样式

    这些库可以轻松实现分组、搜索、多选等功能,并且兼容性较好。 3. **使用Web组件**:Web组件技术允许我们创建自定义的HTML元素,如`&lt;custom-select&gt;`,这可以封装样式和逻辑,提高代码复用性。然而,Web组件的兼容...

    JS二级横向下拉菜单

    在网页设计中,二级横向下拉菜单是常见的导航元素,它能够帮助用户更有效地浏览网站结构。这个项目是基于jQuery库实现的,jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和动画制作等任务。 jQuery库的...

    多级CSS3下拉菜单导航.zip

    - **兼容性问题**:虽然现代浏览器对CSS3和JavaScript的支持较好,但老版本的浏览器可能不支持某些特性,需要使用polyfills或降级方案。 - **性能优化**:过多的JavaScript操作可能会影响页面加载速度,应合理使用...

    HTML Select 下拉菜单功能扩展

    HTML的`&lt;select&gt;`元素是网页表单中用于创建下拉菜单的重要组成部分。这个标签允许用户从一组预定义的...通过学习和理解这些代码,你将能够更好地掌握如何扩展HTML的下拉菜单功能,为你的网页应用带来更出色的用户体验。

    js实现兼容性好的微软官网导航下拉菜单效果

    要实现一个兼容性好的下拉菜单,首先要考虑的便是使用JavaScript的基本语法和浏览器事件处理机制。在本案例中,我们会关注以下几个方面的知识点: 1. **鼠标事件处理**: - `mouseover`:当鼠标悬停在元素上时触发...

    EXTJS2.2.1中Grid表头的下拉菜单很难看

    在EXTJS 2.2.1版本中,用户可能会发现Grid表头的下拉菜单在视觉呈现上不尽如人意,这可能是由于默认样式或自定义样式配置不当导致的。 EXTJS的Grid组件允许用户对列进行排序、分组、过滤等操作,而表头的下拉菜单...

    XP关机下拉菜单如何恢复到经典模式0

    在Windows XP操作系统中,用户界面的设计相较于之前的版本有所改变,其中一项改动就是关机选项从传统的按钮形式变为了下拉菜单。对于习惯于经典模式的用户来说,这种变化可能会带来不便。本文将详细介绍如何将XP系统...

    数据有效性制作下拉菜单

    当需要的序列选项较多时,可以将这些选项预先在工作表的某个区域内填写好,例如在Z1:Z3。这样做的好处是可以方便地管理和修改序列。操作步骤是:在Z1:Z3填入序列,如“男,女,其他”。然后选择需要设置下拉菜单的列...

    css下拉菜单示例,兼容ie678,ff,chrome

    - **Firefox和Chrome**:这些现代浏览器通常对CSS3的支持较好,但仍需注意一些细节,如`box-sizing`、`border-radius`和`opacity`等的兼容性问题。 4. **盒模型和边距**:IE6默认使用`border-box`盒模型,而其他...

    css页面滚动固定下拉导航菜单特效

    7. **浏览器兼容性**:虽然现代浏览器对CSS3的支持较好,但考虑到一些老版本或非主流浏览器,开发者还需要注意使用适当的前缀和对不支持CSS3特性的浏览器进行降级处理。 综上所述,"CSS页面滚动固定下拉导航菜单...

    HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表.rar

    4. **兼容性**:尽管现代浏览器对HTML5和JavaScript的支持较好,但为了保证广泛兼容,可能需要考虑使用polyfills或退回到传统方法,比如使用jQuery库。 在提供的HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表....

    HTML下拉列表菜单

    在xHTML中,下拉列表通常通过`&lt;select&gt;`标签创建,配合`&lt;option&gt;`标签来定义各个可选项目。...通过这样的练习,开发者可以学习到如何创建具有更好用户体验的下拉菜单,并理解不同技术之间的协同工作方式。

    有下拉菜单的横向导航

    本文将深入探讨“有下拉菜单的横向导航”这一主题,这种设计模式常见于许多现代网页,尤其适用于内容丰富、层次较多的网站。下拉菜单结合了图片和tab选项卡,为用户提供更直观、更具吸引力的交互体验。 横向导航...

    Excel二级联动下拉菜单

    - 确认并关闭对话框,一级下拉菜单就创建好了。 2. **创建二级下拉菜单** - 对于二级下拉菜单,我们需要设置更复杂的逻辑。选择与一级菜单相邻的单元格,再次打开数据验证。 - 这次在“设置”选项卡中,依然选择...

    jquery插件-分级导航菜单 下拉菜单

    在你提供的资源中,有三个jQuery插件:Superfish Menu、ddsMothMenu和Accordion Menu,它们都能帮助开发者实现美观且功能强大的下拉菜单。 首先,我们来看Superfish Menu。这个插件以其易用性和灵活性著称,它支持...

Global site tag (gtag.js) - Google Analytics