1 頁 (共 1 頁)

jQuery结合PHP-MySQL实现二级联动下拉列表[实例]

發表於 : 2012-02-23 11:43:25
yehlu
http://www.kuqin.com/webpagedesign/20111113/314767.html

实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果!

为便于讲解,这里直接给出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句!

代碼: 選擇全部

/* 地市表 */
create TABLE IF NOT EXISTS `dishi`(
                `ds_id` int(3) auto_increment not null primary key,
                `sf_id` int(3) not null default '0',
                `ds_name` varchar(50) not null
                );
/* 学生表 */
create TABLE IF NOT EXISTS `xuesheng`(
                `xs_id` int(3) auto_increment not null primary key,
                `ds_id` int(3) not null default '0',
                `xs_name` varchar(50) not null
                );
接着搭个前台架子:

代碼: 選擇全部

<table border="0" width="100%">
    <tr>
        <td width=100>省份</td>
        <td>
            <select name="sf_id" id="sf_id" title="选择省份">
                <option value="1">河南省</option>
                <option value="2">浙江省</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>地市</td>
        <td>
            <select name="ds_id" id="ds_id" title="选择地市">

            </select>
        </td>
    </tr>
    <tr>
        <td>学生姓名</td>
        <td><input type=text maxlength=20 name="xs_name" value=""></td></tr>
</table>
接着就是jQuery部分,详解可看代码后注释部分:

代碼: 選擇全部

<script language="JavaScript">
    function getVal(){
        $.getJSON("select.php",{sf_id:$("#sf_id").val()},function(json){
            var ds_id = $("#ds_id");
            $("option",ds_id).remove(); //清空原有的选项,也可使用 ds_id.empty();
            $.each(json,function(index,array){
                var option = "<option value='"+array['ds_id']+"'>"+array['ds_name']+"</option>";
                ds_id.append(option);
            });
        });
    }
    //下面是页面加载时自动执行一次getVal()函数
    $().ready(function(){
        getVal();
        $("#sf_id").change(function(){//省份部分有变动时,执行getVal()函数
            getVal();
        });
    });
</script>
其中的select.php就是关键部分了,此文件接收前台通过$.getJSON方法传递过来的参数 sf_id,然后select.php根据省份sf_id获取对应的地市数据,再返回JSON数据,前台通过jQuery将JSON数据进行处理,写入<option>,即完成了联动效果!

代碼: 選擇全部

$sf_id = $_GET["sf_id"];
if(isset($sf_id)){
    $q=mysql_query("select * from dishi where sf_id = $sf_id");
    while($row=mysql_fetch_array($q)){
        $select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name']));
    }
    echo urldecode(json_encode($select));
}
其中的urlencode()、urldecode()函数为防止中文数据库内容乱码!这里还需要注意的是,select.php不得再有其它数据返回,免得JSON返回错误!

最后补充一下,有童鞋问这效果在添加学生信息的时候能方便使用,如果有传递过来的学生信息需要编辑时,不能直接显示要编辑的学生所处的地市!这里就需要加个判断了:

首先将上面的:<select name="ds_id" id="ds_id" title="选择地市"> </select>部分做个判断

代碼: 選擇全部

<select name="ds_id" id="ds_id" title="选择地市">
    <?php if( isset($_GET['ds_id']) ){//返回要编辑的学生所属的地市
        $sql="SELECT * FROM dishi WHERE ds_id=".$ds_id;
        $resultds=mysql_query($sql,$conn);
        while($listds=mysql_fetch_array($resultds)){ ?>
            <option value="<?php echo $listds['ds_id'] ?>" <?php if( $listds['ds_id']==$ds_id ){ echo 'selected="selected"'; } ?> name="ds_id"><?php echo $listds['ds_name'] ?></option>
        <?php }    ?>
    <?php } ?>
</select>
然后在页面加载时,首次执行getVal()函数前做判断,说明看注释部分:

代碼: 選擇全部

    $().ready(function(){
        //当$ds_id不为空,表示加载修改状态的表单,此时就不能在页面加载时立即调用getVal()函数,以避免无法显示要修改的账目所在的收支分类
        <?php if( empty($ds_id) ){ ?>//当$ds_id为空,表示加载添加表单,此时要在页面加载时立即调用getVal()函数,以显示当前收支类型的子分类
            getVal();
        <?php } ?>
        $("#sf_id").change(function(){
            getVal();
        });
    });