`
hbing
  • 浏览: 10405 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery实现两级下拉框

阅读更多
在公司写了一个两级下拉框,用了Jquery框架,初次简单的使用了一下,感觉很好,以后用的机会会很多。

JSP页面的代码:

<table>
      <tr>
       <td>
         <select class="inputitem" name="sheng" id="sheng" style="width:98px;color:#003366" onChange="abc();">
           <option selected value="0">选择省份</option>
       <% Iterator it=list.iterator();
       while(it.hasNext()){
       Sheng sheng=(Sheng)it.next();
       %>
        <option value="<%=sheng.getSid() %>" ><%=sheng.getSheng() %></option>
       <%
       }
       %>
         
         </select>
           ->
     </td>
     <td id = "aa">     
           <select id="a" >
            <option value="0">选择市</option>
           </select>
          
       </td>
      </tr>
     </table>

JS关键代码:

<script>

function abc(){
  var sheng=document.getElementById('sheng').value;
  $.get("shi.do?t="+Math.random()+"&shengID="+sheng,function callback(data){  //将节点的数据发给服务端/shi ,当加载成功时调用function (data)
    $("#aa").html(data);         //将从服务端的数据输入到id ="aa"的标签里。
  });

}

</script>

Action代码:

ServletOutputStream out=response.getOutputStream(); //获得ServletOutputStream的对象out
  StringBuffer sb=new StringBuffer();
  sb.append("<select name='shi' id='shi' align='left'><option value='0' id='s'>选择市</option>");
  for(int i=0;i<list.size();i++){
   Shi shi=list.get(i);
   sb.append("<option value="+shi.getSid()+">"+shi.getShi()+"</option>");
  }
  sb.append("</select>");
  out.print(sb.toString());//输出字符串数据到JSP页面上



截了一个图,好像看不出效果。
分享到:
评论

相关推荐

    ajax实现二级下拉框和用户名校验

    JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...

    二级关联下拉框jquery+ json java jsp

    1. 创建HTML结构,定义两个下拉框,并使用jQuery绑定事件监听器,当一级下拉框改变时,触发Ajax请求。 2. 使用jQuery的`$.ajax`或`$.getJSON`方法向服务器发送请求,获取JSON数据。 3. 在Servlet中,处理请求,查询...

    jquery省市县联动下拉框

    `location.js` 和 `YLChinaArea.js` 是两个关键的JavaScript文件,它们可能包含了实现联动下拉框的代码。`location.js` 可能是主要的入口文件,用于初始化和管理整个联动过程,而`YLChinaArea.js` 可能包含全国各省...

    ajax 实现二级下拉框,地址联动,serverlet,java,xmlHttp

    在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...

    jQuery选择日期时间下拉框代码.zip

    本资源“jQuery选择日期时间下拉框代码.zip”提供了基于Vue.js框架实现的日期时间下拉框解决方案,对于提升用户体验和增强网页交互性有着显著作用。 首先,Vue.js是一个轻量级的JavaScript框架,以其数据绑定和组件...

    jQuery多选和单选下拉框插件.zip

    在这个插件中,可能会有一个主文件(如`jquery.dropdown.js`),该文件定义了与下拉框相关的所有功能,包括初始化、事件绑定、选择项管理等。此外,可能还会有其他辅助文件,比如实现特定动画效果的函数库。 为了...

    jQuery仿百度搜索下拉框自动补全代码插件.zip

    在jQuery仿百度搜索下拉框的功能实现上,typeahead.js通过监听用户的输入事件,实时查询后台数据,并将匹配的结果动态渲染到下拉框中,让用户在输入过程中就能预览可能的搜索结果。 在使用typeahead.js时,我们需要...

    使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

    在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...

    jquery带搜索的下拉框(可模糊搜索)

    **jQuery 带搜索的下拉框:Chosen 插件详解** 在Web开发中,我们经常遇到需要创建带有搜索功能的下拉框,以便用户能够更高效地找到他们想要的选项。`jQuery Chosen`插件就是这样一个强大的工具,它能够将传统的...

    2级下拉框联动含数据库

    因此,这个页面可能用于实现省市区联动的功能,即用户先选择省份,接着二级下拉框会自动更新显示该省份下的城市。 实现二级下拉框联动含数据库的基本步骤如下: 1. **数据库设计**:创建一个包含省份和城市的...

    jquery实现select下拉框美化特效源码.zip

    在这个案例中,"jquery实现select下拉框美化特效源码.zip"提供了一个实用的解决方案,帮助开发者在项目中实现更高级的下拉框效果,无需从零开始编写复杂的JavaScript代码。通过学习和运用这个插件,你可以更好地掌握...

    jQuery基于Layui搜索下拉框代码

    本篇文章将深入探讨如何利用jQuery和Layui来实现一个具有搜索功能的下拉框。 首先,jQuery是一个强大的JavaScript库,它的API简洁易用,提供了许多方便的函数来处理DOM操作、事件处理、动画效果以及Ajax请求。Layui...

    级联下拉框效果 jquery

    实现级联下拉框效果,我们通常需要两个或多个`&lt;select&gt;`元素,并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时,触发事件处理函数,根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...

    jQuery基于Layui搜索下拉框代码.zip

    现在,我们将这两个工具结合起来,实现一个搜索下拉框的功能。这个功能主要包含以下几个部分: 1. **HTML结构**:首先,我们需要在HTML页面中创建一个输入框和一个下拉框。输入框用于用户输入搜索关键词,下拉框则...

    jquery 多个下拉列表相互作用

    首先,jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。在1.4.1版本中,jQuery已经非常成熟,提供了丰富的API和功能,足以支持这种复杂的交互效果。 要实现这...

    javascript实现二级联动下拉框

    在网页设计中,二级联动下拉框是一种常见的交互元素,常用于地区选择、产品分类等场景,用户在选择一级选项后,二级下拉框会显示与之相关的子选项。JavaScript作为客户端脚本语言,是实现这种功能的重要工具。这篇...

    jQuery省市区三级联动下拉框.zip

    这个“jQuery省市区三级联动下拉框”是一个利用jQuery库实现的解决方案,它基于jQuery 1.8.2的迷你版本(jquery-1.8.2.min.js)进行构建。下面我们将详细探讨这一技术实现及其相关知识点。 首先,jQuery是一个广泛...

    用Axjx做两级连动下拉框

    综上所述,使用jQuery(或者可能是Axjx)实现两级联动下拉框,需要结合HTML、JavaScript/jQuery、CSS以及后端API共同协作完成。通过监听用户在一级下拉框中的选择,动态地更新二级下拉框的内容,以提供流畅且高效的...

    mvc3二级联动下拉框

    4. JavaScript和jQuery:为了实现联动效果,通常会在前端使用JavaScript或jQuery来监听一级下拉框的“change”事件。当事件触发时,发送Ajax请求到服务器,获取新的二级下拉框数据,并更新到DOM中。 5. Ajax:ASP...

    jQuery使用EasyUi实现三级联动下拉框效果

    5. 三级联动的具体实现中,需要注意的是,当一级下拉框的选项发生改变时,需要清空二级和三级下拉框中的内容,并重新加载数据。这可以通过调用`combobox("clear")`方法来实现。同样的,也需要设置二级和三级下拉框的...

Global site tag (gtag.js) - Google Analytics