黑马程序员技术交流社区

标题: 级联效果的下拉选择框 [打印本页]

作者: vikramorochi    时间: 2013-9-16 23:00
标题: 级联效果的下拉选择框
WEB页面中有两个下拉选择框,第一个选择省,然后第二个就能选择该省下的所有的市,而且页面不刷新。或者告诉我一下怎么用JS异步读取XML中的数据,网上看到的都试过失败了,还是没搞好,求教,谢谢啦!


作者: 淡忘回忆    时间: 2013-9-23 19:25
一定要读取XML文件么,如果要读取XML文件用XElement和XDocument进行操作,XElement类用于写XML,XDocument类用于读取XML文件,既然你只要读取XML文件,我就只给个读取的例子:
  1. //读取XML文档









  2. XDocument XDoc2 = XDocument.Load(@"d:\caoyi.xml");

  3. //获取根节点

  4. XElement Root = XDoc2.Root;

  5. //输出根节点的Name,Value

  6. Console.WriteLine("Root.Name:{0}",Root.Name);//输出:Student

  7. Console.WriteLine("Root.Value:{0}",Root.Value);//输出:dede22男

  8. Console.WriteLine("Root.ToString:{0}",Root.ToString());//输出:节点下的整个XML

  9. //获取子元素

  10. XElement xEle1 =Root.Element("Name");//获取子元素组

  11. Console.WriteLine(xEle1.Value);//输出:dede



  12. foreach (XElement ele in Root.Elements())

  13. {

  14.     Console.WriteLine("{0}-{1}",ele.Name,ele.Value);

  15. }
复制代码
既然要求无刷新,就在将XML内容读取到内存中以后,再用AJAX技术做无刷新,获取读到的内容
作者: 0和1,编程世界    时间: 2013-9-23 21:58
下面是一个年月日用JS动态改变天数的例子代码:
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  function yearChanged(year,type){
   var month='';
   if(type=='start')
    month = document.getElementById("startMonth");
   else
    month = document.getElementById("endMonth");
   var MMvalue = month.value;
   
   var n = MonHead[MMvalue - 1];
   if (MMvalue ==2 && IsPinYear(year.value))
   n++;
   writeDay(n,type)
  }
  
  function monthChanged(month,type){
  
   var startyear ='';
   if(type=='start')
    startyear=document.getElementById("startYear");
   else
    startyear=document.getElementById("endYear");
   var YYYYvalue = startyear.value;
   var monthNum=month.value;
   var n = MonHead[monthNum - 1];
   if (monthNum ==2 && IsPinYear(YYYYvalue))
   n++;
   writeDay(n,type);
  }
  function writeDay(n,type)
  {
   var startday='';
   if(type=='start')
     startday= document.getElementById("startDay");
   else
     startday= document.getElementById("endDay");
   var e = startday;
   optionsClear(e);
   for (var i=2; i<(n+1); i++){
    if(i<10){
     var temp='0'+i;
     e.options.add(new Option(temp,temp));
    }else{
     var temp=i;
     e.options.add(new Option(temp,temp));
    }
   }
  }
  
  function IsPinYear(year)
  {
   return(0 == year%4 && (year%100 !=0 || year%400 == 0));
  }
  function optionsClear(e)
  {
   e.options.length = 1;
  }
  



  select 下拉列表框默认有一个<option selected="selected"></option> 选择,如果是直接往上面动态添加option时,这

  默认项还是存在,可能会导致前两项重复,可以用下面的方法将其取消!
  function removeFirstItem(s){
   if(s.options[0].text=='01'){
    options[0]=null;
   }
   options[0].selected='selected';
   
  }

作者: Always.    时间: 2013-9-23 22:58
实现省市选择器的代码 :
  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Data;
  5. using System.Drawing;
  6. using System.Linq;
  7. using System.Text;
  8. using System.Windows.Forms;
  9. using System.Data.SqlClient;
  10. using System.Configuration;
  11. namespace 省市选择器
  12. {
  13.     public partial class Form1 : Form
  14.     {
  15.         public Form1()
  16.         {
  17.             InitializeComponent();
  18.             string dataDir = AppDomain.CurrentDomain.BaseDirectory;
  19.             if (dataDir.EndsWith(@"\bin\Debug\")
  20.                 || dataDir.EndsWith(@"\bin\Release\"))
  21.             {
  22.                 dataDir = System.IO.Directory.GetParent(dataDir).Parent.Parent.FullName;
  23.                 AppDomain.CurrentDomain.SetData("DataDirectory", dataDir);
  24.             }
  25.             string cnonStr = ConfigurationManager.ConnectionStrings["connStr"].ConnectionString; // 配置文件
  26.             using (SqlConnection conn = new SqlConnection(cnonStr))
  27.             {
  28.                 conn.Open();
  29.                 using (SqlCommand cmd = conn.CreateCommand())
  30.                 {
  31.                     cmd.CommandText = "select * from promary";
  32.                     using (SqlDataReader reader = cmd.ExecuteReader())
  33.                     {
  34.                         while (reader.Read())
  35.                         {
  36.                             provinceItem item = new provinceItem();      //产生一个Item对象
  37.                             item.Id = reader.GetInt32(reader.GetOrdinal("proID"));  //得到省的Id
  38.                             item.Name = reader.GetString(reader.GetOrdinal("proName"));//得到省的名字   
  39.                             cmb省.Items.Add(item); //向省中添加Item的内容
  40.                         }
  41.                     }
  42.                 }
  43.             }
  44.         }
  45.         private void cmb省_SelectedIndexChanged(object sender, EventArgs e)
  46.         {
  47.             cmb市.Items.Clear();                        //清除市里边的旧数据
  48.             provinceItem item = (provinceItem)cmb省.SelectedItem;
  49.             int proID = item.Id;                   //得到学则省的Id
  50.             string cnonStr = ConfigurationManager.ConnectionStrings["connStr"].ConnectionString;
  51.             using (SqlConnection conn = new SqlConnection(cnonStr))
  52.             {
  53.                 conn.Open();
  54.                 using (SqlCommand cmd = conn.CreateCommand())
  55.                 {
  56.                     cmd.CommandText = "select * from city where proID=@proID";
  57.                     cmd.Parameters.Add(new SqlParameter("proID", proID));//后边的这个proID是选择省的ID

  58.                     using (SqlDataReader reader = cmd.ExecuteReader())
  59.                     {
  60.                         while (reader.Read())  //对于每一条取出cityname
  61.                         {
  62.                             string cityname = reader.GetString(reader.GetOrdinal("cityName"));
  63.                             cmb市.Items.Add(cityname);
  64.                         }
  65.                         
  66.                     }
  67.                 }
  68.             }
  69.         }     
  70.     }
  71.     class provinceItem
  72.     {
  73.         public string Name { get; set; }
  74.         public int Id { get; set; }
  75.     }
  76. }
复制代码
在这里,需要设定Combobox属性,将DisplayMenber中的设定为Name,这样省的Combobox中的内容才是Name中的值,
希望能帮到你!

作者: vikramorochi    时间: 2013-10-4 12:57
Always. 发表于 2013-9-23 22:58
实现省市选择器的代码 :在这里,需要设定Combobox属性,将DisplayMenber中的设定为Name,这样省的Combobox ...

谢谢,不过我想要的是用JS写的,不是用后台代码的

作者: 祐掱緣    时间: 2013-10-11 09:28
不建议用js读取xml,因为js读取要加载ax插件,除了IE其它浏览器不支持。
建议你自己写一个ashx的一般处理程序去读取内容,然后在通过js的get或者post方式获取你要的内容。





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2