`
mahaitao
  • 浏览: 3248 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery实现级联下拉列表

 
阅读更多
<script type="text/javascript">
  /**
* 级联下拉列表
*/
$(function(){
  var base = getRootPath();
  var url = base + "/util/classtype!rootClassTypeList.action";
 
   $.post(url, function(data) {  

  var selectObj = $('#s1').get(0);
  initOptions(selectObj, data); 

},'JSON');

$('#s1').change(function() {
$('#s2').empty();
    var base = getRootPath();
    var url = base + "/util/classtype!subClassList.action";
$.post(url, {'id' : $('#s1').val()}, function(data) {
var selectObj = $('#s2').get(0);
initOptions(selectObj, data);
});

},'JSON');
 
  });
</script>


/**
* 初始化options
* @param selectObject select对象
* @param list 数组 格式为{"value" : key, "label" : label}
*/
var initOptions = function(selectObject, list) {
    if (selectObject !== null && selectObject !== undefined) {
        var options = selectObject.options;      
        options.length = 0;
        // 添加一个空选项
        var nullOption = new Option("", "", false, false);
        options.add(nullOption);
        if (list !== null && list !== undefined && list !== "[]") {
       
         var json = eval(list);
    
            for (var i in json) {
                var item = json[i];
               
                if (item !== null && item !== undefined) {
                    var value = item.key;
                    var label = item.label;
                    // label 与 value 必须同时存在才是一个完整的数据
                    if (value !== null && value !== undefined && label !== null && label !== undefined) {
                        var option = new Option(label, value, false, false);
                        options.add(option);
                    }
                }
            }
        }
    }
};
分享到:
评论

相关推荐

    jquery简单实现级联下拉列表

    在给定的代码片段中,我们看到一个简单的级联下拉列表实现。页面中有两个下拉列表,`#s1` 和 `#s2`。`#s1` 的改变会触发 `change()` 函数,该函数根据 `#s1` 的选中值动态修改 `#s2` 的内容。 #### 代码解析 1. **...

    jQuery实现的多级级联下拉列表

    **jQuery实现的多级级联下拉列表** 在网页开发中,级联下拉列表是一种常见的交互元素,它允许用户从一系列相关选项中选择,这些选项根据先前的选择动态更新。在本项目中,我们利用jQuery库来实现这种功能,同时结合...

    jQuery 级联下拉列表

    在这个场景中,我们将讨论如何使用jQuery实现级联下拉列表。 首先,我们需要理解`$().related`这个函数是jQuery的一个插件方法,它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...

    jQuery 级联下拉列表(修正版)

    总的来说,jQuery级联下拉列表是一个实用的前端功能,通过合理的JavaScript代码和HTML结构,可以实现高效的联动效果,提高用户在网页上的操作体验。修正版的实现则考虑了实际应用中的问题和需求,使得该功能更加健壮...

    jQuery实现级联地区选择

    "jQuery实现级联地区选择"这个主题就是关于如何利用jQuery库来创建一个动态联动的省份-城市选择器。这个实例包含了JSP(JavaServer Pages)、JavaScript和CSS三个主要部分,旨在提供一种高效、用户友好的选择体验。 ...

    input 级联下拉列表

    以下是对`input`级联下拉列表的详细解释和实现方法。 1. **HTML基础知识**: `input`元素是HTML中的一种表单控件,用于接收用户输入。在创建级联下拉列表时,我们通常使用`&lt;select&gt;`标签来定义下拉列表,并通过`...

    ajax实现级联下拉列表代码

    在提供的"ajax实现的级联下拉列表代码.txt"文件中,应该包含了实现上述过程的具体JavaScript代码。这个文件可能包含了一个或多个函数,用于初始化下拉列表、绑定事件监听器、构建AJAX请求、解析响应数据以及更新DOM...

    jquery 实现级联效果!

    首先,级联效果通常涉及到多个下拉列表(`&lt;select&gt;`元素),当用户在一个下拉列表中做出选择时,其他关联的下拉列表会根据这个选择自动更新其选项。要实现这一功能,我们需要以下几个步骤: 1. **HTML结构**:创建...

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    select级联下拉列表

    以下是一个简单的jQuery示例,展示了如何实现级联下拉列表: ```javascript $(document).ready(function() { $('#province').on('change', function() { var selectedProvince = $(this).val(); // 使用Ajax获取...

    级联下拉列表

    这是一个基础的级联下拉列表实现,对于更复杂的需求,例如异步加载数据、多级级联等,可能需要引入更高级的库,如jQuery UI的`selectmenu`插件或现代前端框架(如React、Vue、Angular)中的组件库。不过,这个简单的...

    JavaScript动态级联下拉列表框

    在实现JavaScript动态级联下拉列表框时,通常涉及以下几个关键知识点: 1. DOM操作:JavaScript通过Document Object Model(DOM)来操作HTML元素。要实现级联效果,我们需要获取或创建下拉列表(`&lt;select&gt;`元素),...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    JQuery写的日期级联下拉菜单

    这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期,同时保持页面的简洁性...

    级联下拉列表例子(ajax和jquery)&prototype1;.7&jquery;_jar

    在级联下拉列表的实现中,jQuery可以用来绑定事件监听器,当用户在第一个下拉列表中做出选择时触发AJAX请求,同时它还用于更新第二个下拉列表的HTML内容。 在提供的"prototype.1.7.js"文件中,Prototype是一个...

    两级级联下拉列表jquery插件doubleSelect.zip

    "两级级联下拉列表jquery插件doubleSelect.zip"是一个专门处理这种需求的jQuery插件,它可以帮助开发者快速实现这种功能,提升用户体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    AJAX重构+级联下拉列表

    本项目聚焦于使用AJAX进行页面重构,特别是实现级联下拉列表,这是一种常见的用户界面元素,常见于地址选择、类别筛选等场景。 在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个...

Global site tag (gtag.js) - Google Analytics