最优雅的不刷新下拉联动解决方案--数据库版--xml版

本文链接：https://blog.csdn.net/srx/article/details/502535

一个有两个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实现的。网址忘了，代码如下：

function BindSelect( strXMLSrc , objSelectName)
{
    m_oXMLDoc.async = true;
    m_oXMLDoc.onreadystatechange = Function( "fnLoadComplete('" + objSelectName + "');" );
    m_oXMLDoc.load( strXMLSrc );
}

function Init()
{
try{
BindSelect( m_sXmlSrc, "MaterialClass1");
}
catch(e)
{
setTimeout("Init()",1000)
}
}

</script>

<body οnlοad="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.
代码略。