Home > Backend Development > PHP Tutorial > php-联动下拉列表 和 php、htm之间传值

php-联动下拉列表 和 php、htm之间传值

WBOY
Release: 2016-06-23 13:46:18
Original
1038 people have browsed it

dis.htm

<div class="newdestination_city">					<span>目的地所属城市</span> <select name="content">						<option value="0">大洲</option>						<!--{loop $content $con}-->						<option value='$con[districtid]'>$con[name]</option>						<!--{/loop}-->					</select> <select name="country">						<option value="0">国家</option>						<!--{loop $country $cou}-->						<option value='$cou[districtid]'>$cou[name]</option>						<!--{/loop}-->					</select> <select name="district">						<option value="0">区域</option>						<!--{loop $district $dis}-->						<option value='$dis[districtid]'>$dis[name]</option>						<!--{/loop}-->					</select> <select name="province">						<option value="0">省份</option>						<!--{loop $province $pro}-->						<option value='$pro[districtid]'>$pro[name]</option>						<!--{/loop}-->					</select> <select name="city">						<option value="0">城市</option>						<!--{loop $city $ci}-->						<option value='$ci[districtid]'>$ci[name]</option>						<!--{/loop}-->					</select>				</div>
Copy after login


dis.php
//……$country=getBycontent($content);$pro=getBycountry($country);//……
Copy after login


我想让第一个下拉列表被选之后出现第二个下拉列表,并且根据第一个下拉列表中被选择的选项搜索出第二个下拉列表的列表项。请问怎么才能在这两个文件之间传值呢?


回复讨论(解决方案)

这种是需要采用ajax进行交互的。

这种是需要采用ajax进行交互的。


能不能给个例子

demo.php

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>demo</title><script src="//code.jquery.com/jquery-1.11.0.min.js"></script></head><body><script type="text/javascript">var data = [];function sel(v, c){    $.get("server.php", { parent: v, type: c },function(ret){        if(ret.success==true){            var list = ret.list;            var selobj = document.getElementById('sel'+(c+1));            for (i=1;i<list.length;i++){                selobj.options[i] = new Option(list[i].name,list[i].id);            }        }    },'json');}</script><form name="f1"><select name="select1" id="sel1" onchange="sel(this.value, 1)"><option value="0">大洲</option><option value="1">亚洲</option><option value="2">欧洲</option></select><select name="select2" id="sel2" onchange="sel(this.value, 2)">   <option value="0">国家</option>  </select><select name="select3" id="sel3" onchange="sel(this.value, 3)"><option value="0">区域</option></select><select name="select4" id="sel4" onchange="sel(this.value, 4)"><option value="0">省份</option></select><select name="select5" id="sel5"><option value="0">城市</option></select></form> </body></html>
Copy after login
Copy after login


server.php
<?php$parent = isset($_GET['parent'])? $_GET['parent'] : 0;$type = isset($_GET['type'])? $_GET['type'] : 0;$sel = array();$sel[1][1] = array('',array('id'=>1,'name'=>'中国'),array('id'=>2,'name'=>'日本'));$sel[1][2] = array('',array('id'=>3,'name'=>'英国'),array('id'=>4,'name'=>'法国'));$sel[2] = array();$sel[2][1] = array('',array('id'=>1,'name'=>'南方'),array('id'=>2,'name'=>'北方'));$sel[2][2] = array('',array('id'=>3,'name'=>'南边'),array('id'=>4,'name'=>'北边'));$sel[2][3] = array('',array('id'=>5,'name'=>'南部'),array('id'=>6,'name'=>'北部'));$sel[2][4] = array('',array('id'=>7,'name'=>'南岸'),array('id'=>8,'name'=>'北岸'));$sel[3] = array();$sel[3][1] = array('',array('id'=>1,'name'=>'中国省1'),array('id'=>2,'name'=>'中国省2'));$sel[3][2] = array('',array('id'=>3,'name'=>'中国省3'),array('id'=>4,'name'=>'中国省4'));$sel[3][3] = array('',array('id'=>5,'name'=>'日本省1'),array('id'=>6,'name'=>'日本省2'));$sel[3][4] = array('',array('id'=>7,'name'=>'日本省3'),array('id'=>8,'name'=>'日本省4'));$sel[3][5] = array('',array('id'=>9,'name'=>'英国省1'),array('id'=>10,'name'=>'英国省2'));$sel[3][6] = array('',array('id'=>11,'name'=>'英国省3'),array('id'=>12,'name'=>'英国省4'));$sel[3][7] = array('',array('id'=>13,'name'=>'法国省1'),array('id'=>14,'name'=>'法国省2'));$sel[3][8] = array('',array('id'=>15,'name'=>'法国省3'),array('id'=>16,'name'=>'法国省4'));$sel[4] = array();$sel[4][1] = array('',array('id'=>1,'name'=>'中国市11'),array('id'=>2,'name'=>'中国市12'));$sel[4][2] = array('',array('id'=>3,'name'=>'中国市21'),array('id'=>4,'name'=>'中国市22'));$sel[4][3] = array('',array('id'=>5,'name'=>'中国市31'),array('id'=>6,'name'=>'中国市32'));$sel[4][4] = array('',array('id'=>7,'name'=>'中国市41'),array('id'=>8,'name'=>'中国市42'));$sel[4][5] = array('',array('id'=>9,'name'=>'日本市11'),array('id'=>10,'name'=>'日本12'));$sel[4][6] = array('',array('id'=>11,'name'=>'日本21'),array('id'=>12,'name'=>'日本22'));$sel[4][7] = array('',array('id'=>13,'name'=>'日本31'),array('id'=>14,'name'=>'日本32'));$sel[4][8] = array('',array('id'=>15,'name'=>'日本41'),array('id'=>16,'name'=>'日本42'));$sel[4][9] = array('',array('id'=>17,'name'=>'英国市11'),array('id'=>18,'name'=>'英国市12'));$sel[4][10] = array('',array('id'=>19,'name'=>'英国市21'),array('id'=>20,'name'=>'英国市22'));$sel[4][11] = array('',array('id'=>21,'name'=>'英国市31'),array('id'=>22,'name'=>'英国市32'));$sel[4][12] = array('',array('id'=>23,'name'=>'英国市41'),array('id'=>24,'name'=>'英国市42'));$sel[4][13] = array('',array('id'=>25,'name'=>'法国市11'),array('id'=>26,'name'=>'法国市12'));$sel[4][14] = array('',array('id'=>27,'name'=>'法国市21'),array('id'=>28,'name'=>'法国市22'));$sel[4][15] = array('',array('id'=>29,'name'=>'法国市31'),array('id'=>30,'name'=>'法国市32'));$sel[4][16] = array('',array('id'=>31,'name'=>'法国市41'),array('id'=>32,'name'=>'法国市42'));$list = $sel[$type][$parent];$ret = array();$ret['success'] = true;$ret['list'] = $list;echo json_encode($ret);?>
Copy after login
Copy after login


server.php可改成读数据库的,这样更方便。


这种是需要采用ajax进行交互的。


能不能给个例子

你去网上找下省市级联动的案例就可以知道了。

百度省市联动

demo.php

<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>demo</title><script src="//code.jquery.com/jquery-1.11.0.min.js"></script></head><body><script type="text/javascript">var data = [];function sel(v, c){    $.get("server.php", { parent: v, type: c },function(ret){        if(ret.success==true){            var list = ret.list;            var selobj = document.getElementById('sel'+(c+1));            for (i=1;i<list.length;i++){                selobj.options[i] = new Option(list[i].name,list[i].id);            }        }    },'json');}</script><form name="f1"><select name="select1" id="sel1" onchange="sel(this.value, 1)"><option value="0">大洲</option><option value="1">亚洲</option><option value="2">欧洲</option></select><select name="select2" id="sel2" onchange="sel(this.value, 2)">   <option value="0">国家</option>  </select><select name="select3" id="sel3" onchange="sel(this.value, 3)"><option value="0">区域</option></select><select name="select4" id="sel4" onchange="sel(this.value, 4)"><option value="0">省份</option></select><select name="select5" id="sel5"><option value="0">城市</option></select></form> </body></html>
Copy after login
Copy after login


server.php
<?php$parent = isset($_GET['parent'])? $_GET['parent'] : 0;$type = isset($_GET['type'])? $_GET['type'] : 0;$sel = array();$sel[1][1] = array('',array('id'=>1,'name'=>'中国'),array('id'=>2,'name'=>'日本'));$sel[1][2] = array('',array('id'=>3,'name'=>'英国'),array('id'=>4,'name'=>'法国'));$sel[2] = array();$sel[2][1] = array('',array('id'=>1,'name'=>'南方'),array('id'=>2,'name'=>'北方'));$sel[2][2] = array('',array('id'=>3,'name'=>'南边'),array('id'=>4,'name'=>'北边'));$sel[2][3] = array('',array('id'=>5,'name'=>'南部'),array('id'=>6,'name'=>'北部'));$sel[2][4] = array('',array('id'=>7,'name'=>'南岸'),array('id'=>8,'name'=>'北岸'));$sel[3] = array();$sel[3][1] = array('',array('id'=>1,'name'=>'中国省1'),array('id'=>2,'name'=>'中国省2'));$sel[3][2] = array('',array('id'=>3,'name'=>'中国省3'),array('id'=>4,'name'=>'中国省4'));$sel[3][3] = array('',array('id'=>5,'name'=>'日本省1'),array('id'=>6,'name'=>'日本省2'));$sel[3][4] = array('',array('id'=>7,'name'=>'日本省3'),array('id'=>8,'name'=>'日本省4'));$sel[3][5] = array('',array('id'=>9,'name'=>'英国省1'),array('id'=>10,'name'=>'英国省2'));$sel[3][6] = array('',array('id'=>11,'name'=>'英国省3'),array('id'=>12,'name'=>'英国省4'));$sel[3][7] = array('',array('id'=>13,'name'=>'法国省1'),array('id'=>14,'name'=>'法国省2'));$sel[3][8] = array('',array('id'=>15,'name'=>'法国省3'),array('id'=>16,'name'=>'法国省4'));$sel[4] = array();$sel[4][1] = array('',array('id'=>1,'name'=>'中国市11'),array('id'=>2,'name'=>'中国市12'));$sel[4][2] = array('',array('id'=>3,'name'=>'中国市21'),array('id'=>4,'name'=>'中国市22'));$sel[4][3] = array('',array('id'=>5,'name'=>'中国市31'),array('id'=>6,'name'=>'中国市32'));$sel[4][4] = array('',array('id'=>7,'name'=>'中国市41'),array('id'=>8,'name'=>'中国市42'));$sel[4][5] = array('',array('id'=>9,'name'=>'日本市11'),array('id'=>10,'name'=>'日本12'));$sel[4][6] = array('',array('id'=>11,'name'=>'日本21'),array('id'=>12,'name'=>'日本22'));$sel[4][7] = array('',array('id'=>13,'name'=>'日本31'),array('id'=>14,'name'=>'日本32'));$sel[4][8] = array('',array('id'=>15,'name'=>'日本41'),array('id'=>16,'name'=>'日本42'));$sel[4][9] = array('',array('id'=>17,'name'=>'英国市11'),array('id'=>18,'name'=>'英国市12'));$sel[4][10] = array('',array('id'=>19,'name'=>'英国市21'),array('id'=>20,'name'=>'英国市22'));$sel[4][11] = array('',array('id'=>21,'name'=>'英国市31'),array('id'=>22,'name'=>'英国市32'));$sel[4][12] = array('',array('id'=>23,'name'=>'英国市41'),array('id'=>24,'name'=>'英国市42'));$sel[4][13] = array('',array('id'=>25,'name'=>'法国市11'),array('id'=>26,'name'=>'法国市12'));$sel[4][14] = array('',array('id'=>27,'name'=>'法国市21'),array('id'=>28,'name'=>'法国市22'));$sel[4][15] = array('',array('id'=>29,'name'=>'法国市31'),array('id'=>30,'name'=>'法国市32'));$sel[4][16] = array('',array('id'=>31,'name'=>'法国市41'),array('id'=>32,'name'=>'法国市42'));$list = $sel[$type][$parent];$ret = array();$ret['success'] = true;$ret['list'] = $list;echo json_encode($ret);?>
Copy after login
Copy after login


server.php可改成读数据库的,这样更方便。



我copy过去了,但是不能执行吖,国家之后的数据都取不出来

http://www.thinkphp.cn/code/128.html

我在chrome?firefox下?行是正常的。
你先直接?行我?的,如果可以。再改到你那?。

谢谢大神,我回家之后在自己的电脑上试过,可以运行,在公司的电脑上就不行,大神求罩

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template