最优雅的不刷新下拉联动解决方案--数据库版--xml版
来源:互联网 发布:k means聚类算法 java 编辑:程序博客网 时间:2024/05/22 07:57
一个有两个select ,要求第一个select 改变后,第二个select的option也都相应地变化。
先看看这段代码:
function getSecondTrades(id){
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var uri = "/u2publishAdvertise.do?method=getSecondTrades&id="+id;
xmlhttp.Open("POST", uri, false);
xmlhttp.Send();
document.all.secondTrades.innerHTML=xmlhttp.responseText;
}
首先,第一个select onchage时间调用该方法。
第一,这个js方法会执行一个url对应的Action 。
第二,这个Action得到一个对应的List作为新下拉框内容,并mapping到一个新页面。
第三,这个新页面就显示被联动的<select>,这个页面的整个内容被当前的<div>当作内容显示在当前页面。
如此,无刷新地解决了联动问题。
总结:
这种情况适合下拉框内容为数据库表。下拉框内容是xml,那么就不能使用了。记得有个人写过这样的
东西,也是用xmlhttp实现的。网址忘了,代码如下:
<script>
var m_oXMLDoc = new ActiveXObject("Microsoft.XMLDOM");
var m_sXmlSrc = "MaterialClass.xml";
//-----------------------------------------------
// LoadXML(strXMLSrc)
//-----------------------------------------------
function BindSelect( strXMLSrc , objSelectName)
{
m_oXMLDoc.async = true;
m_oXMLDoc.onreadystatechange = Function( "fnLoadComplete('" + objSelectName + "');" );
m_oXMLDoc.load( strXMLSrc );
}
function fnLoadComplete(objSelectName)
{
var objSelect = document.all[objSelectName];
var aryXMLNodes;
var node;
if (objSelect == null)
return;
try
{
var iReadyState = m_oXMLDoc.readyState;
}
catch(e)
{
return;
}
if( iReadyState != 4 ) return;
if( m_oXMLDoc != null && m_oXMLDoc.xml != "" )
{
objSelect.length = 0;
aryXMLNodes = m_oXMLDoc.documentElement.selectNodes("MaterialClass");
for (var i=0; i < aryXMLNodes.length; i++)
{
node = aryXMLNodes[i];
objSelect.options[i] = new Option(node.getAttribute("Description"),node.getAttribute("MaterialClassCode"));
}
if(objSelect.ChildSelectName != null)
{
objSelect.onchange = Function( "BindSelect('MaterialClass'+this.options[this.selectedIndex].value+'.xml', '"+objSelect.ChildSelectName+"');" );
objSelect.fireEvent("onchange");
}
}
}
function Init()
{
try{
BindSelect( m_sXmlSrc, "MaterialClass1");
}
catch(e)
{
setTimeout("Init()",1000)
}
}
</script>
<body onload="Init()">
<p>多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)</p>
<select name="MaterialClass1" ChildSelectName="MaterialClass2"></select>
<select name="MaterialClass2" ChildSelectName="MaterialClass3"></select>
<select name="MaterialClass3"></select>
<p>HTML代码如下:
<pre>
<select name="MaterialClass1" ChildSelectName="MaterialClass2"></select>
<select name="MaterialClass2" ChildSelectName="MaterialClass3"></select>
<select name="MaterialClass3"></select>
</pre>
其中ChildSelectName表示下一级Select的name</p>
<p>其中的一个xml如下:
<pre>
<MaterialClasses>
<MaterialClass MaterialClassCode="01" Description="黑色及有色金属"/>
<MaterialClass MaterialClassCode="02" Description="水泥、砂石砖瓦、砼"/>
<MaterialClass MaterialClassCode="03" Description="木、竹材及其制品"/>
</MaterialClasses>
</pre>
</p>
</body>
=========================
MaterialClasses.xml
<?xml version="1.0" encoding="GB2312"?>
<MaterialClasses>
<MaterialClass MaterialClassCode="01" Description="黑色及有色金属"/>
<MaterialClass MaterialClassCode="02" Description="水泥、砂石砖瓦、砼"/>
<MaterialClass MaterialClassCode="03" Description="木、竹材及其制品"/>
</MaterialClasses>
===========================
MaterialClass01.xml
<?xml version="1.0" encoding="GB2312"?><MaterialClasses>
<MaterialClass MaterialClassCode="0101" Description="圆钢"/>
<MaterialClass MaterialClassCode="0102" Description="钢筋、盘条"/>
<MaterialClass MaterialClassCode="0103" Description="钢丝、钢棒"/>
</MaterialClasses>
这样能解决xml数据为基础的。
如果连xml都没有使用,数据又不多,那么写js,增加几个case.设置select的options.
代码略。
- 最优雅的不刷新下拉联动解决方案--数据库版--xml版
- 5级下拉框不刷新联动
- 优雅的H5下拉刷新【minirefresh】
- 不刷新当前页面,而多个下拉框联动
- Javascript版的下拉框联动
- script不刷新页面的联动
- 三级联动下拉列表[数据库版] 带注释
- Asp三级联动下拉菜单数据库调用版
- 下拉选项 2级 联动-- 服务器端(刷新)和ajax(不刷新)
- 无刷新联动下拉框
- 一个无刷新的二级联动下拉框
- 极好的无刷新二级联动下拉列表
- ThinkPHP +AJAX 联动从数据库无刷新提取数据,显示在页面的下拉框时出错!
- .net和javascript 结合 ,生成三级联动无刷新下拉菜单【修改版】1
- .net和javascript 结合 ,生成三级联动无刷新下拉菜单【修改版】2
- 最简单的UIScrollView 下拉刷新思路
- 最简单的SwipeRefreshLayout下拉刷新
- 全国省,市,区三级联动无刷新下拉菜单(输出xml表格法)
- 大学生宿舍——中国最昂贵的房价
- JSF与Struts的异同
- CPU基本术语
- 用delphi制作由小到大的动画窗体!
- JS:only number(int ,float) can be input
- 最优雅的不刷新下拉联动解决方案--数据库版--xml版
- 大学生宿舍——中国最昂贵的房价
- 交换机术语
- VB.NET中LISTVIEW排序(原创)
- 一些有用的URL
- blog刚刚开通,还没有耕耘
- logiscope系列-使用说明书
- 正则表达式
- 使用C#调用外部Ping命令获取网络连接情况(转——主要是对dos命令应用)