首頁 > 開發者 > MySQL

php mysql js 下拉框 二級聯動

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

二級聯動下拉式清單（select）,都是從資料庫中取值，其中第二級為可多選列表（multiple）.若要實現二級也是下拉式功能表，可以將multiple改了即可。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全動態二級聯動下拉式清單</title>
</head>
<body>
<?
/***********************************************
** 功   能：PHP+mysql實現二級級聯下拉框
** 資料庫：資料庫名（db_city）、資料表（t_province、t_city）
** 表t_province中欄位：id（id編號）、provinceName（省份名）
** 表t_city中的欄位：id（id編號）、provinceId（省份ID）、cityName（城市名）
***********************************************/

//****************** 串連選擇資料庫 ***************
$link = mysql_connect("localhost", "root", "123")
   or die("Could not connect : " . mysql_error());
mysql_select_db("db_city") or die("Could not select database");

//******************提取省份資訊******************
$sqlSel = "select * from t_province order by id ";
$result = mysql_query($sqlSel) or die("Query failed : " . mysql_error());

$forum_data = array();
while( $row = mysql_fetch_array($result) )
{
   $forum_data[] = $row;
}
//print_r ($forum_data);
mysql_free_result($result);

//**************擷取城市資訊**************       
$sqlSel2 = "select * from t_city order by provinceId desc";

if( !($result2 = mysql_query($sqlSel2)) )
{
   die('Could not query t_city list');
}

$forum_data2 = array();
while( $row2 = mysql_fetch_array($result2) )
{
   $forum_data2[] = $row2;
}

mysql_free_result($result2);
?>

<!--************ JavaScript處理province--onChange *************-->
<script language = "JavaScript">
var onecount2;
subcat2 = new Array();
<?php
$num2 = count($forum_data2);
?>
onecount2=<?echo $num2;?>;
<?
for($j=0;$j<$num2;$j++)
{
?>
subcat2[<?echo $j;?>] = new Array("<?echo
$forum_data2[$j]['id'];?>","<?echo
$forum_data2[$j]['provinceId'];?>","<?echo
$forum_data2[$j]['cityName'];?>");
<?}?>
function changelocation(id)
{
document.myform.city.length = 0;
var id=id;
var j;
document.myform.city.options[0] = new Option('==選擇城市==','');
for (j=0;j < onecount2; j++)
{
if (subcat2[j][1] == id)
   {
   document.myform.city.options[document.myform.city.length] = new Option(subcat2[j][2], subcat2[j][0]);
   }
}
}
</script>

<!--********************頁面表單*************************-->
<form name="myform" method="post">
地址：<select name="bigClass"
onChange="changelocation(document.myform.bigClass.options[document.myform.bigClass.selectedIndex].value)"
size="1">
<option selected>請選擇省份</option>
  
<?php
$num = count($forum_data);

for($i=0;$i<$num;$i++)
{
?>
<option value="<?echo $forum_data[$i]['id'];?>"><?echo $forum_data[$i]['provinceName'];?></option>
<?
}
?>
</select>
<select name="city" multiple>
<SELECT name=city size=1 id="city">
<option selected value="">==選擇城市==</option>
</select>
</form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More