十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
给第一个select加js事件,点击它的时候动态加载第二个select的内容,比如写个ajax获取第一个select的value(这个value是哪个quanx_id),然后去后台请求,后无论是用缓存还是说直接从数据库中查,得到这个value对应的field,再返回数据到前台进行处理。也可以在页面加载的时候就直接吧每个quanx_id的对应关系全部查找并在模板中的js用相应变量存储后,再采用上面的思路去动态加载就是了。反正最终都是当select1的value发生变化,动态加载select2的value.
托里网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联成立与2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
JAVASCRIPT就可以写了 你把JAVASCRIPT追加到PHP代码里面就OK另外
具体 代码
head
script language="javascript" type="text/javascript"
var 后盾网=Array("后盾IT教育","后盾网php培训","朝阳","孙河");
var 后盾网=Array("php培训","IT教育");
var 其余地方=Array("国外","未知地址");
function change()
{
shengList=document.getElementById("sheng");
nIndex=shengList.selectedIndex;
cityList=document.getElementById("city");
switch(nIndex)
{
case 1:
doChange(cityList,北京);
break;
case 2:
doChange(cityList,朝阳);
break;
case 3:
doChange(cityList,其余地方);
break;
default:
cityList.options.length=1;
cityList.options[0].text="--请选择--";
break;
}
}
function doChange(myList,MyItem)
{
var iLength=MyItem.length;
myList.options.length=iLength;
for(var i=0;iiLength;i++)
{
myList.options[i].text=MyItem[i];
}
}
/script
/head
body
select name="sheng" onchange="change()"
option value="chooseSheng"请选择/option
option value="北京"朝阳/option
option value="后盾网"php培训/option
option value="其他地方"其他地方/option
/select
select name="city"option value="chooseCity" selected="selected"请选择/option/select/td
12345678910phpfunction ajax_get_b(){ $aid = $_GET['aid']; if( ! $aid ) return false; $res = array();获取二级数据//"select * from table where aid = {$aid}" $str = "select"; foreach($res as $v) $str .= "option$v['name']/option"; $str .= "/select"; }1html+jquery:
select
id="sa"
optiona/option
optionb/option
optionc/option
optiond/option
/select
div
id="sb"
/div
$('#sa').change(function(){
var
url
=
'';
var
aid
=
$(this).val();
$.get(url,{aid:aid},function(str){
$('#sb').html(str);
});
});
html文件:
liandong.html
首先要引入jquery.js文件
html
title二级联动/title
head
script src="__PUBLIC__/scripts/jquery.js" type="text/javascript"/script
script type="text/javascript"
$(function(){
$('#AreaId').change(function(){
//获取父类的id
var $id=$('#AreaId').val();
//通过ajax进行传值
$.getJSON('__URL__/liandong',{id:$id},function(data){
//回调函数
if (data.status==1){
//首先清除子类中值不为空的,如果没有这句话你会发现子类的显示会这个增加,二不是你想要的结果
$('#ServerId option[value!=""]').remove();
//计算返回数组的数目,并循环显示
for (var i=0;i=data.data.length;i++) {
//定义html标签,和显示的值,id和type_name为数据库中的字段名
var option ="option value="+data.data[i].id+""+data.data[i].type_name+"/option";
//显示的位置
$(option).appendTo('#ServerId');
}
}
});
});
});
/script
/head
body
select id="AreaId" name="AreaId"
option selected="selected" value=""请选择游戏区/option
?php
//循环显示父类
foreach($plei as $val){
?
option value="{$val[id]}"{$val[type_name]}/option
?php
}
?
/select
select id="ServerId" name="ServerId"
option selected="selected" value=""请选择游戏服/option
/select
/body
/html
php文件
IndexAction.class.php
class IndexAction extends Action {
public function liandong(){
//实例化数据表
$type=M('Type');
//首先是查询类别表中的父类,我的是父类的pid都为0
$plei=$type-where('pid=0')-select();
//分配变量
$this-assign("plei",$plei);
//这个主要是判断父类的内容是否发生变化,此判断非常重要(ps:我那会没写这个判断,总是出错,非常头疼)
if($_GET[id]){
$sel=$type-where('pid='.$_GET[id])-select();
$this-ajaxReturn($sel,'子类',1);
}
$this-display();
}
}
select 有 onchange 事件 ,触发 js 进行ajax 请求 , 然后返回 数据进行组合构成 select 元素。替换第二个select就行了