jquery 级联下拉框实例代码

 

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 级联下拉框实例代码</title>
</head>

<body>
<script>
$('#select1').change(function (){
$.ajax({
url:'css教程rain.jsp教程',
type:'post', //数据发送方式
datatype:'xml', //接受数据格式
data:'id=1&text='+$("select[@id='select1'] option[@selected]").text()+'&date='+new date(),  //要传递的数据
error:function(json){
    alert( "not lived!");
  },
  success: function(xml){
      $("#select2").html('');//清空2号下拉框  
  $(xml).find("name").each(function(){
  var id=$(this).attr("id"); //获取返回的id
  var name=$(this).text(); //获取返回的name
    $('<option value='+id+'>'+name+'</option>').appendto('#select2'); //添加下拉框
    $("#select2").attr('disabled','') //2号下拉框可用
        });
  }
});
});

//方法二

if(id.equals("1"))
{
response.setcontenttype("text/xml");//注意,由于你是以xml形式传递过来的,所以这里必须写。
system.out.println(text);
out.print("{'data':[");
  mgr mgr=new mgr();//查询数据库教程
  list list = mgr.getsel2(text);
  for(int i=0;i<list.size();i++)
  {
    test test =(test)list.get(i);
    if(i ==list.size()-1){
    out.print("{'ids':"+test.getid()+",'names':"+test.getname()+"}");
    }else{
     out.print("{'ids':"+test.getid()+",'names':"+test.getname()+"},");
    }
  }
out.print("]};");

---------------index.jsp
//1号下拉框事件
$('#select1').change(function (){

$.ajax({
url:'cssrain.jsp',
type:'post', //数据发送方式
datatype:'json', //接受数据格式
data:'id=1&text='+$("#select1 option:selected").text()+'&date='+new date(),  //要传递的数据

error:function(json){
    alert( "not lived!");
  },
success: function(xml){
      $("#select2").html('');//清空2号下拉框  
  $(xml).find("name").each(function(){
  var id=$(this).attr("id"); //获取返回的id
  var name=$(this).text(); //获取返回的name
 
    $('<option value='+id+'>'+name+'</option>').appendto('#select2'); //添加下拉框
    $("#select2").attr('disabled','') //2号下拉框可用
        });
  }
});
});
</script>
</body>
</html>

时间: 2024-10-03 21:43:14

jquery 级联下拉框实例代码的相关文章

jquery级联下拉框

$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheeltype").chi

java省市级联下拉菜单实例代码_java

本文实例为大家分享了java省市级联的具体代码,供大家参考,具体内容如下 1.LoadAreaServlet.java package com.scce.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; im

android用PopWindow做下拉框实例代码

最近在做下拉框,本来想用spinner,可是spinner达不到项目要求,跟同学同事问了一圈,都在用popwindow,网上看了一下,popwindow挺简单的,可定制性挺强的,符合我的要求,所以,借鉴网上看的代码,自己撸了一遍.写篇博客以防忘记. 首先,先写个自定义布局,代码如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche

jquery 模拟下拉框插件代码

  <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>jquery 代码</titl

jquery select下拉框美化代码

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="con

js省市二级联下拉框菜单代码

                 -请选择工作地区-    湖南省国内   1天内       3天内一周内半月内一个月内二个月内三个月内半年内一年内 高级搜索   <?php echo print_r($_GET); ?>

JQuery实现级联下拉框效果实例讲解_jquery

用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下效果图:      逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

jQuery+PHP+MySQL实现无限级联下拉框效果_jquery

 本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下  效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Conten

javascript基于DOM实现省市级联下拉框的方法_javascript技巧

本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title