`
SpringLin
  • 浏览: 140131 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

jQuery 下拉列表选择 加载 (练手实例)

阅读更多

<html>   
<head>   
<title>Next join Test</title>   
<style type="text/css">   
    .font-color{   
        width:150px;   
        height: 200px;   
        color: rgb(79,129,189)   
    }   
    #div1{border:1px solid #000; width: 50%; position:relative; top: 20%; background-color: #ccc;}   
    #province{position:relative; top: -170px; left: 10px;}   
    #div2{border:1px solid #000; width: 50%; position:relative; top: 19%; background-color: #ccc;}   
</style>   
<script type="text/javascript" src="lib/jquery-1.4.2.js"></script>   
<script type="text/javascript">   
  
var simpleNodes =[   
                { id:1, pId:0, name:"手机", ename:"Mobile", open:true},   
                { id:11, pId:1, name:"诺基亚", ename:"Nokia"},   
                { id:111, pId:11, name:"C6(音乐版)", ename:"C6(Music)"},   
                { id:112, pId:11, name:"X6(导航版)", ename:"X6(GPS)"},   
                { id:113, pId:11, name:"5230(世博版)", ename:"5230(SB)"},   
                { id:114, pId:11, name:"N97mini", ename:"N97mini"},   
                { id:12, pId:1, name:"三星", ename:"Samsung"},   
                { id:121, pId:12, name:"I9000(联通版)", ename:"I9000(Unicom)"},   
                { id:122, pId:12, name:"I9000(移动版)", ename:"I9000(China Mobile)"},   
                { id:123, pId:12, name:"Galaxy Naos", ename:"Galaxy Naos"},   
                { id:124, pId:12, name:"Fascinate", ename:"Fascinate"},   
                { id:13, pId:1, name:"索爱", ename:"Sony Ericsson"},   
                { id:131, pId:13, name:"U1i(Satio)", ename:"U1i(Satio)"},   
                { id:132, pId:13, name:"U5i(Vivaz)", ename:"U5i(Vivaz)"},   
                { id:133, pId:13, name:"X10i", ename:"X10i"},   
                { id:134, pId:13, name:"Aino mini", ename:"Aino mini"}];   
  
//初始化加载province   
function province(){   
    for(i=0; i < simpleNodes.length; i++ ){   
        if(simpleNodes[i].pId == "1"){   
            var newoption = document.createElement("option");   
            newoption.text = simpleNodes[i].name;   
            newoption.value = simpleNodes[i].id;   
            form1.province.options.add(newoption);   
        }   
    }   
}   
  
$(function(){   
       
    $("#province").change(function(){   
        var value = this.value;   
        var len = form1.city.length;   
        if(len > 0){   
            $("#city option").remove();   
        }   
        for(i=0; i < simpleNodes.length; i++ ){   
            if(simpleNodes[i].pId == value){   
                //效率过低   
                //$("#city").append("<option value="+simpleNodes[i].id+">"+simpleNodes[i].name+"</option>");   
                //$('<option/>',{   
                //  value:simpleNodes[i].id,   
                //  text:simpleNodes[i].name}).appendTo("#city");   
                   
                //JS   
                var newoption = document.createElement("option");   
                newoption.text  = simpleNodes[i].name;   
                newoption.value = simpleNodes[i].id;   
                form1.city.options.add(newoption);   
            }   
        }   
    });   
  
    $("#city").dblclick(function(){   
        var value = $("#city option:selected").val();   
        var text = $("#city option:selected").text();   
        var flag = false;   
        var len = $("#selcity option").length;   
        //alert(len);   
        if(len > 0){   
          $("#selcity option").each(function(i){   
            if(value == $(this).val()){   
                flag = true;   
                alert("已选择,请勿重选!");   
                return false;   
             }   
           });   
           if(!flag){   
                //不删除原节点   
             //$("#selcity").append("<option value="+ value +">"+ text +"</option>");   
             $("#city option:selected").appendTo("#selcity");   
           }    
         }else{   
            //不删除原节点   
            //$("#city option:selected").append("<option value="+ value +">"+ text +"</option>");   
            $("#city option:selected").appendTo("#selcity");   
         }   
    });   
       
    $("#selcity").dblclick(function(){   
        $("#selcity option:selected").remove();   
        //还原   
        //$("#selcity option:selected").appendTo("#city");   
    });   
       
});   
</script>   
</head>   
  
<body onload="javascript:province();">   
<center>   
<div id="div2">   
    <span><font color="blue"><strong>jQuery + JS 下拉框加载选择</strong></font></span>    
</div>   
<div id="div1">   
<form id="form1" name="form1">   
    <select id="province" name="province">   
        <option value="N" selected="selected">请选择</option>   
    </select>   
    &nbsp;&nbsp;   
    <select size="10" class="font-color" id="city" name="city" style="width:150px"></select>   
    <select multiple="multiple" class="font-color" id="selcity" name="selcity"></select>   
  
</form>   
<div>   
</center>   
</body>   
  
</html>  

 

分享到:
评论

相关推荐

    jQuery下拉列表框日期选择代码

    在"jQuery下拉列表框日期选择代码"这个场景中,jQuery将用于响应用户的交互,如点击input框,以及控制日期时间选择器的显示和隐藏。 接下来,我们需要创建一个HTML结构,通常包含一个input元素,作为用户触发日期...

    jQuery下拉列表框双向选择

    而“jQuery下拉列表框双向选择”则涉及到一种交互设计,允许用户在一个下拉列表中选择项,并同时将这些选择同步到另一个相关的下拉列表中,实现数据的双向同步。 要实现这样的功能,我们需要理解以下几个关键知识点...

    jquery下拉列表特效

    本文将围绕"jQuery下拉列表特效"这一主题,深入探讨其实现原理、优势及应用实例,以助于提升您的Web开发技能。 一、jQuery下拉列表特效基础 1. 原生HTML下拉列表:HTML中的`&lt;select&gt;`元素和`&lt;option&gt;`元素组合构成...

    jquery 下拉刷新上拉加载

    在网页开发中,"下拉刷新"和"上拉加载"功能已经成为现代用户界面不可或缺的部分,尤其是在处理大量数据或内容的列表时。这两个特性能够提供流畅的用户体验,使得用户可以轻松地查看更多的信息,而无需手动滚动到页面...

    jQuery移动端下拉刷新、上拉加载更多插件

    本篇文章将深入探讨jQuery移动端下拉刷新与上拉加载更多插件的工作原理和实现方法。 首先,下拉刷新是一种用户交互设计,当用户在页面顶部向下拖动时,如果达到一定距离,页面会刷新内容。这个功能在新闻、社交网络...

    jquery下拉列表树

    这时,jQuery下拉列表树(jQuery TreeSelect)应运而生,它将下拉列表与树形结构相结合,使得多级数据的展示和选择更为直观和便捷。 一、jQuery下拉列表树的基本概念 jQuery下拉列表树是一种将传统的HTML Select...

    jQuery手机移动端下拉列表选择代码.zip

    "jQuery手机移动端下拉列表选择代码"就是一个针对这个问题的解决方案,它能够帮助开发者创建功能丰富的、适合手机和平板等移动端设备的下拉列表选择组件。 首先,这个代码可能包括一个自定义的下拉列表样式,以适应...

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表,这是一种常见的Web前端功能,常用于数据关联选择场景,如地区选择(省市区)、分类选择等。 ### 核心概念:级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

    jQuery下拉选择城市插件hhDrop

    《jQuery下拉选择城市插件hhDrop深度解析与应用》 在网页开发中,用户界面的设计和交互体验至关重要。为了提升用户体验,许多开发者选择使用jQuery这一强大的JavaScript库来实现复杂的功能,例如动态下拉选择城市的...

    jquery下拉列表插件

    而“jQuery下拉列表插件”就是利用jQuery来增强HTML原生的`&lt;select&gt;`元素,提供更丰富的交互性和自定义样式。这个插件名为“selectBox”,它旨在模仿并扩展下拉列表的功能,为用户带来更好的使用体验。 首先,原生...

    jquery UI下拉列表选择菜单

    《jQuery UI 下拉列表选择菜单详解》 在网页设计中,交互性和用户体验是至关重要的因素。jQuery UI 提供了一系列强大的工具,帮助开发者构建美观、易用的用户界面,其中下拉列表选择菜单(Dropdown Select Menu)...

    jquery.jSelectDate.js 下拉列表式日期选择插件实例.rar

    jquery.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    "多选下拉列表"和"复选下拉列表"是常见的组件,用于提供用户在一组选项中进行多个选择的功能。这些组件通常用于数据筛选、配置设置或信息录入等场景。本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. *...

    jQuery下拉列表select美化插件jQselectable

    jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable

    jQuery 级联下拉列表

    3. **jQuery插件**:`$().related`这个插件会监听第一个下拉列表(通常是省份)的选择事件,当用户选择一个省份后,通过JavaScript或者Ajax获取相应的城市数据,并填充到第二个下拉列表。同理,选择城市后,获取区县...

    jquery搜索框下拉列表选择搜索分类效果.rar

    本示例“jquery搜索框下拉列表选择搜索分类效果”旨在实现一个交互式的搜索功能,其中用户可以通过下拉列表来选择特定的搜索分类,从而提高用户体验并提供更精确的搜索结果。 在C#编程环境中,虽然jQuery主要用于...

    jquery下拉列表树插件代码.zip

    在本文中,我们将深入探讨jQuery下拉列表树插件代码,这是一种用于构建树形结构的下拉选择框的实用工具。这种插件广泛应用于网页设计中,为用户提供更直观、更易于操作的选择体验,尤其在处理层级关系数据时非常有用...

    jQuery树形插件下拉列表选择框.zip

    《jQuery树形插件下拉列表选择框:深入解析与应用》 在现代网页开发中,用户界面的交互性与用户体验至关重要。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能和简便的操作方式,大大简化了复杂的DOM...

    一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

    在本篇教程中,我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得前端开发变得更加高效和便捷。本章节...

    jQuery适应移动端选择银行下拉列表

    "jQuery适应移动端选择银行下拉列表" 是一个专为优化移动端用户体验而设计的jQuery插件,它使得用户在小型屏幕上也能方便地浏览和选择银行列表。这个插件能够使原本在桌面端可能显得拥挤或难以操作的下拉列表,在...

Global site tag (gtag.js) - Google Analytics