发新话题
打印

无刷新关联下拉菜单演示 (xajax+SmartTemplate)

无刷新关联下拉菜单演示 (xajax+SmartTemplate)

演示名称
(Demo name)
中文关联下拉菜单 V1.0
作者
(Author)
HonestQiao(乔楚) MSN: HonestQiao@hotmail.com
演示说明
(Demo explain)
先选择左边的下拉菜单,再选择右边的下拉菜单
Match Word演示地址: http://cws.yi.org/ajax/select.php

代码包括: select.php Template getsource select.server config

select.php
复制内容到剪贴板
代码:
<?php
    require_once "./config.php";

    /// Default request url is select.server.php
    $xajax = new xajax("select.server.php");
    $xajax->setCharEncoding(DEFAULT_CHARSET);
    if(isset($_GET['debug'])){
        $xajax->debugOn();
    }

    // Function for URL1 which is autocomplete.server.php
    $xajax->registerFunction("loadTop");
    $xajax->registerFunction("loadChild");
    $xajax->registerFunction("showSelect");

    // Function for GetSource
    $xajax->registerFunction("getSource");

    $page = new SmartTemplate("select.html");
    $page->assign('VERSION', '1.0');

    /// replace $xajax->printJavascript('../../');
    /// config.php has     define("XAJAX_URL_ROOT" , "/ajax/include/xajax/");
    $page->assign('XAJAX_JAVASCRIPT', $xajax->getJavascript(XAJAX_URL_ROOT));
    $page->output();
?>
SmartTemplate部份
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>中文关联下拉菜单 v{VERSION}</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""></HEAD><BODY>
{XAJAX_JAVASCRIPT}
<table border=1 width=750>
  <tr>  
    <td width="126">演示名称<br>
      (Demo name)</td>
    <td colspan="3">中文关联下拉菜单 V{VERSION}</td>
  </tr>
  <tr>
    <td width="126">作者<br>
      (Author) </td>
    <td colspan="3">HonestQiao(乔楚) MSN: [email]HonestQiao@hotmail.com[/email]</td>
  </tr>
  <tr>  
    <td valign="top" width="126">演示说明<br>
      (Demo explain) </td>
    <td colspan="3">  
      <p>先选择左边的下拉菜单,再选择右边的下拉菜单</p>
    </td>
  </tr>
  <tr>  
    <td width="126" height="18">Match Word</td>
    <td colspan="3" height="18">  
      <form name="selectForm" id="selectForm">
<SELECT name="province" id="province" onchange="xajaxRequestUri='select.server.php';xajax_loadChild(xajax.getFormValues('selectForm'));">
    <option value="0" index=0>请选择</option>
</SELECT>

<SELECT name="city" id="city" onchange="xajaxRequestUri='select.server.php';xajax_showSelect(xajax.getFormValues('selectForm'));">
    <option value="0" index=0>请选择</option>
</SELECT>

<INPUT name="userSelect" id="userSelect" size=30 value="">
</form>

<script type="text/javascript" language="javascript">
function dump_props(obj, obj_name) {  
    var result = "", i = "";
    for (i in obj)
        result += obj_name + "." + i + " = " + obj[i] + "\n";
    return result;
}

    function addOption(objSelectNow,txt,val)
    {
        /// 使用W3C标准语法为SELECT添加Option
        //var objOption = document.createElement("OPTION");
        //objOption.setAttribute("text", txt);
        //objOption.setAttribute("value", val);
        //objOption.setAttribute("index", val);
        objOption = new Option(txt, val);
        objSelectNow.options.add(objOption);
    }
    function addOptionGroup(selectId,optGroupString)
    {
        var optGroup = optGroupString.split(",");

        var objSelect = document.getElementsByTagName("SELECT");
        var objSelectNow = objSelect[selectId];
        objSelectNow.length = 1;
        /// 成组添加Options
        for (i=1; i<optGroup.length; i++)
        {
            addOption(objSelectNow, optGroup[i], i);
        }
    }
    function showSelectAlerter(provinceSelected, citySelected)
    {
        alert("省份 " + provinceSelected + "\n" +
              "地区 " + citySelected + "\n" );
    }

    document.onLoad = xajax_loadTop();
</script>
    </td>
  </tr>
</table>
<hr>
<h3>Source of:  
<a name="select" onclick="xajaxRequestUri='getsource.php';xajax_getSource(this.name);"><u>select.php</u></a>   
<a name="Template.select" onclick="xajaxRequestUri='getsource.php';xajax_getSource(this.name);"><u>Template</u></a>   
<a name="getsource" onclick="xajaxRequestUri='getsource.php';xajax_getSource(this.name);"><u>getsource</u></a>
<a name="select.server" onclick="xajaxRequestUri='getsource.php';xajax_getSource(this.name);"><u>select.server</u></a>  
<a name="config.select" onclick="xajaxRequestUri='getsource.php';xajax_getSource(this.name);"><u>config</u></a>
</h3>
<hr />
<DIV id=fileSource> </DIV>
</BODY>
</HTML>
getsource
复制内容到剪贴板
代码:
<?php
    session_start();
    if(!isset($_SESSION["listindex"])){
        $_SESSION["listindex"] = 0;
    }
    require_once "./config.php";

    $xajax = new xajax();
    $xajax->setCharEncoding(DEFAULT_CHARSET);
    //$xajax->debugOn();

    // Function for GetSource
    $xajax->registerFunction("getSource");

    function getSource($arg)
    {
        // 对$arg做一些基本处理例如从数据库检索数据
        // 然后把结果赋值给变量,例如$newContent

        $strSourceFielname = (''!=trim($arg)) ? trim($arg) . '.php' : 'index.php';
        $strSourceFielname = ($strSourceFielname=='Template.autocomplete.php' ||  
            $strSourceFielname=='Template.select.php' ||  
            $strSourceFielname=='Template.select2.php' ||  
            $strSourceFielname=='config.autocomplete.php' ||  
            $strSourceFielname=='config.select.php' ||  
            $strSourceFielname=='config.select2.php' ||  
            $strSourceFielname=='autocomplete.php' ||  
            $strSourceFielname=='getsource.php' ||  
            $strSourceFielname=='autocomplete.server.php' ||  
            $strSourceFielname=='autocomplete.server2.php' ||
            $strSourceFielname=='select.php' ||
            $strSourceFielname=='select2.php' ||
            $strSourceFielname=='select.server.php' ||
            $strSourceFielname=='select2.server.php'  
            ) ? $strSourceFielname : 'index.php';
        $strSourceFielname = ($strSourceFielname=='Template.autocomplete.php') ? 'themes/default/autocomplete.html': $strSourceFielname;
        $strSourceFielname = ($strSourceFielname=='Template.select.php') ? 'themes/default/select.html': $strSourceFielname;
        $strSourceFielname = ($strSourceFielname=='Template.select2.php') ? 'themes/default/select2.html': $strSourceFielname;

        $strSourceFielname = ($strSourceFielname=='config.autocomplete.php') ? 'Country_Territory.txt': $strSourceFielname;
        $strSourceFielname = ($strSourceFielname=='config.select.php') ? 'china_province_city.txt': $strSourceFielname;
        $strSourceFielname = ($strSourceFielname=='config.select2.php') ? 'china_province_city_county.txt': $strSourceFielname;

        ob_start();
        if (file_exists($strSourceFielname))
                highlight_file($strSourceFielname);
        else
            echo("File doesn't exists!");

        $strSourceContent = ob_get_contents();
        ob_end_clean();

        // 实例化xajaxResponse 对象
        $objResponse = new xajaxResponse(DEFAULT_CHARSET);

        // 添加指令到响应之中,用于指派
        //指定元素(例如id="SomeElementId")的innerHTML属性的新的内容
        //$objResponse->addScript("alert('test');");

        $objResponse->addAssign("fileSource","innerHTML", "$strSourceContent");
         
        //返回xajaxResponse 对象生成的XML响应
        return $objResponse->getXML();
    }
    $xajax->processRequests();
?>
select.server
复制内容到剪贴板
代码:
<?php
    require_once "./config.php";

    $xajax = new xajax();
    $xajax->setCharEncoding(DEFAULT_CHARSET);

    // Function for select in select.server2.php
    $xajax->registerFunction("loadTop");
    $xajax->registerFunction("loadChild");
    $xajax->registerFunction("showSelect");


    /// Function for Load loadTop Select Option
    function loadTop()
    {
        // 实例化xajaxResponse 对象
        $objResponse = new xajaxResponse(DEFAULT_CHARSET);

        $strResult = "";
        $aryTree = file("china_province_city.txt");
        foreach($aryTree as $key=>$value)
            $aryTree[$key] = strtok(trim($value), ',');
        $strResult = implode(',', $aryTree);

        // 添加指令到响应之中,用于指派
        //指定元素(例如id="SomeElementId")的innerHTML属性的新的内容
        $objResponse->addScript("addOptionGroup('province','$strResult');");
         
        //返回xajaxResponse 对象生成的XML响应
        return $objResponse->getXML();
    }

    /// Function for Load Child Select Option
    function loadChild($arg)
    {
        // 对$arg做一些基本处理例如从数据库检索数据
        // 然后把结果赋值给变量,例如$newContent

        $intIndexProvince = intval($arg["province"]);

        // 实例化xajaxResponse 对象
        $objResponse = new xajaxResponse(DEFAULT_CHARSET);
         
        $strResult = "";
        if($intIndexProvince){
            $aryTree = file("china_province_city.txt");
            $strResult = trim($aryTree[$intIndexProvince]);
            // 添加指令到响应之中,用于指派
            //指定元素(例如id="SomeElementId")的innerHTML属性的新的内容
            $objResponse->addScript("addOptionGroup('city','$strResult');");
        }
         
        //返回xajaxResponse 对象生成的XML响应
        return $objResponse->getXML();
    }

    /// Function for Load Child Select Option
    function showSelect($arg)
    {
        // 对$arg做一些基本处理例如从数据库检索数据
        // 然后把结果赋值给变量,例如$newContent

        $intIndexProvince = intval($arg["province"]);
        $intIndexCity = intval($arg["city"]);

        // 实例化xajaxResponse 对象
        $objResponse = new xajaxResponse(DEFAULT_CHARSET);
         
        $strResult1 = "";$strResult2 = "";
        if($intIndexProvince && $intIndexCity){
            $aryTree = file("china_province_city.txt");
            $aryTemp = explode(',', trim($aryTree[$intIndexProvince]));
            $strResult1 = $aryTemp[0];
            $strResult2 = $aryTemp[$intIndexCity];

            // 添加指令到响应之中,用于指派
            //指定元素(例如id="SomeElementId")的innerHTML属性的新的内容
            //$objResponse->addScript("showSelectAlerter('$strResult1','$strResult2');");
            $objResponse->addAssign("userSelect","value","$strResult1 $strResult2");
        }
         
        //返回xajaxResponse 对象生成的XML响应
        return $objResponse->getXML();
    }

    $xajax->processRequests();
?>
config
复制内容到剪贴板
代码:
请选择,请选择
北京,东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆
上海,黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明
天津,和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县
重庆,万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川
河北,石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水
山西,太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城
内蒙古,呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,鄂市
辽宁,沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛
吉林,长春,吉林,四平,辽源,通化,白山,松原,白城,延边
黑龙江,哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭
江苏,南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安
浙江,杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水
安徽,合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州
福建,福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德
江西,南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶
山东,济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽
河南,郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源
湖北,武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州");
湖南,长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界
广东,广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮
广西,南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池
海南,海口,三亚
四川,成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州
贵州,贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南
云南,昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧");
西藏,拉萨,日喀则,山南,林芝,昌都,阿里,那曲
陕西,西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛
甘肃,兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南
宁夏,银川,石嘴山,吴忠,固原
青海,西宁,海东,海南,海北,黄南,玉树,果洛,海西
新疆,乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏
香港,香港
澳门,澳门
台湾,台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖
其它,北美洲,南美洲,亚洲,非洲,欧洲,大洋洲
[ 本帖最后由 flyindance 于 2007-11-17 08:09 编辑 ]
本帖最近评分记录
  • phpres 威望 +5 2007-11-17 10:29
一個偽裝成白癡的天纔!

TOP

HonestQiao(乔楚) 在国内比较早就开始推广ST模板,感谢ing....................
一個偽裝成白癡的天纔!

TOP

代码可以打包发上来就好啊!

TOP

发新话题