以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XML基础 』  (http://bbs.xml.org.cn/list.asp?boardid=1)
----  怎么用XML在数据岛里实现下拉列表框?  (http://bbs.xml.org.cn/dispbbs.asp?boardid=1&rootid=&id=6575)

--  作者：wedge
--  发布时间：4/8/2004 1:44:00 PM

--  怎么用XML在数据岛里实现下拉列表框?
偶想用XML做数据源来实现下拉列表框的动态效果,请高手给予指点.
select.xml
  <?xml version="1.0" encoding="GB2312" ?>
- <country>
- <province name="陕西">
- <city>
  <city1>西安</city1>
  <city2>咸阳</city2>
  <city3>宝鸡</city3>
  </city>
  </province>
- <province name="河南">
- <city>
  <city1>郑州</city1>
  <city2>洛阳</city2>
  <city3>咸阳</city3>
  </city>
  </province>
  </country>
**************************
select.html
<html>
   <head>
      <title>select item</title>
   </head>
   <xml id="selectdso" src="select.xml" async="falsle"></xml>
   <body>
   <center>
     <h2>select item</h2>   
   <hr></hr>
   <table datasrc="#selectdso">

   <select datafld="city">
    <option><div datafld="city1"></div></option>
 </select>
   </table>
   </center>
   </body>
</html>
出不来呀!
--  作者：faly
--  发布时间：4/8/2004 1:55:00 PM

--  
我以前试过的，但是用xsl的
但不知道保存在哪了
晕
尽快搞上……

--  作者：wedge
--  发布时间：4/8/2004 2:20:00 PM

--  
谢谢faly了，用xsl的和data islands 区别大吗？
--  作者：bestjamie
--  发布时间：4/8/2004 4:02:00 PM

--  
可以用flash实现
本人昨天刚刚作过
呵呵
--  作者：小鞋子
--  发布时间：4/8/2004 4:14:00 PM

--  
（4）：选单连动
原作者：車仔
动机：
现在我们做个在IE里应用XML的一个小例子：解决双下拉选单的连动问题。大家最常见的可能就是选取省份后改变城市选项的例子了，那我们就来尝试着用XML来完成吧。

以前介绍的一些功能我是直接用XML+XSL文件来完成的，大家可能还不是很熟悉它的用法，所以我这次就用HMTL+XML来做，希望能够让大家更清楚的了解--“XML原来可以如此简单！”：）


材料：
XML卷之选单连动
有2个文件：Citys.xml 和 CitySelect.htm

作用：
选择省份后可以自动显示相对应的城市，这样方便用户，有效的提高数据互动，让自己的页面更加绚丽多彩。  
效果：
浏览这里  
代码：
Citys.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
  <State id="1" name="江西">
    <City>九江</City>
    <City>南昌</City>
    <City>庐山</City>
    <City>景德镇</City>
  </State>
  <State id="2" name="北京">
    <City>北京西</City>
    <City>居庸关</City>
    <City>清华园</City>
    <City>周口店</City>
  </State>
  <State id="3" name="福建">
    <City>福州</City>
    <City>厦门</City>
    <City>漳州</City>
  </State>
  <State id="4" name="甘肃">
    <City>兰州</City>
    <City>洛门</City>
    <City>嘉峪关</City>
  </State>
  <State id="5" name="广东">
    <City>广州</City>
    <City>深圳</City>
    <City>东莞</City>
    <City>石牌</City>
  </State>
  <State id="6" name="安徽">
    <City>合肥</City>
    <City>黄山</City>
    <City>九龙岗</City>
    <City>马鞍山</City>
  </State>
</China>

CitySelect.htm

自定义函数：ChooseState
(读取XML数据中的省的名称，并增加到SelState的下拉列表中)

function ChooseState()
{
  var source;
  var sourceName = "Citys.xml";
  var source = new ActiveXObject('Microsoft.XMLDOM');   //创建一个 MSXML解析器实例
  source.async = false;
  source.load(sourceName);   //装入XML文档
  root = source.documentElement;   //设置文档元素为根节点元素
  sortField=root.selectNodes("//@name");   //搜索属性中含有name的所有节点
  for(var i=0;i<sortField.length;++i)   //增加省份名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
     form1.SelState.options.add(oOption);
  }
   ChooseCity();
}

自定义函数：ChooseCity
(根据当前选定的省名来读取XML数据中的对应城市名称，并增加到SelCity 的下拉列表中)
function ChooseCity()
{
  x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=form1.SelState.options[x].value;
  sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);   //搜索name属性值等于
参数y的State节点下的所有city节点
  for(var i=form1.SelCity.options.length-1;i>=0;--i)   //撤消原来的列表项
  {
    form1.SelCity.options.remove(i)
  }
  for(var i=0;i<sortField.length;++i)   //增加城市名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption);
  }
}

表单源码
<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</FORM>
</BODY>

后记：
刚开始学XML的时候，我也有着和大家一样的迷惑 --- “XML我是学了，可究竟这XML应该怎么用呢？”这个问题阻难了我很久，很久......

因为电子商务和软件开发是我的专长，于是我觉得还是从身边最熟悉的开始做起吧。所以我将网站建设中最常用到的一些功能以XML的方式来完成。 你也一样可以的！

--  作者：wedge
--  发布时间：4/10/2004 8:36:00 PM

--  
谢谢小鞋子斑竹了，回去好好研究。
--  作者：wedge
--  发布时间：4/10/2004 8:44:00 PM

--  
在数据岛里有些标记可以直接连接XML元素，如<img><input>，但<select>不能直接和XML连接吧，必须用脚本和DOM读取XML数据，在动态增加到option里？
--  作者：faly
--  发布时间：4/10/2004 11:48:00 PM

--  
xsl和dataisland个有个的长处咯……
好好研究小鞋子兄的源码……
--  作者：wedge
--  发布时间：4/11/2004 3:00:00 PM

--  
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);   //搜索name属性值等于
参数y的State节点下的所有city节点
少了个印号。
--  作者：lhf
--  发布时间：4/14/2004 10:03:00 AM

--  
wedge ，你是不是刘俊奕啊？
--  作者：wedge
--  发布时间：4/15/2004 2:24:00 PM

--  
不是啊！
--  作者：wlboy110
--  发布时间：1/13/2006 1:16:00 PM

--  
在数据岛里有些标记可以直接连接XML元素，如<img><input>,我看到很多介绍里面也有<select>也能支持数据岛的啊，有没有可以直接用的方法呢？
--  作者：miqi2214
--  发布时间：1/16/2006 10:00:00 AM

--  
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);
这句我没看懂什么意思，引号少在哪儿，还有“uot”代表什么意思？麻烦高手能说明白点吗？
--  作者：zngj
--  发布时间：1/16/2006 11:23:00 AM

--  
&quot; 这个是引号。。。。。。。
--  作者：zngj
--  发布时间：1/16/2006 11:24:00 AM

--  
& quot;
--  作者：yhailong
--  发布时间：1/16/2006 4:18:00 PM

--  
代码挺简单的，收藏了。
--  作者：maxplayfly
--  发布时间：1/24/2006 5:10:00 PM

--  
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;);
问下，大哥们，这句到底是怎么搞的。
--  作者：cscsu
--  发布时间：2/7/2006 5:28:00 PM

--  
谢谢
--  作者：一条辉
--  发布时间：2/9/2006 4:49:00 PM

--  
ChooseCity  这个函数是不是有点问题啊?   无法成功运行呢
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 93.750ms