作者MOONRAKER (㊣康少校是死到哪裡去了)
看板PHP
標題Re: [請益] 請教各位高手關於兩階層下拉選單疑問
時間Thu Jun 21 00:06:06 2012
不想用Ajax，也可以先讀出來，然後偷偷藏在網頁裡面
當然你一定得用javascript, jquery更好
假設你有以下連動的兩個select
<select id="trip">
<option value="">請選擇</option>
<option value="rail">火車</option>
<option value="bus">國道客運</option>
<option value="air">飛機</option>
</select>
<select id="trip_option">
</select>
計畫是當trip的選取項目改變的時候，trip_option裡面的選項也要跟著變
火車，就顯示莒光號、自強號、區間車；國道客運，就顯示統聯、和欣、尊龍；飛機
就…等等。那你可以把這些選項先藏在page裡面：
<select id="topt_rail" style="
display: none;">
<option value="topt_rail_0">莒光號</option>
<option value="topt_rail_1">自強號</option>
<option value="topt_rail_2">區間車</option>
</select>
<select id="topt_bus" style="display: none">
<option value="topt_bus_0">統聯</option>
<option value="topt_bus_0">和欣</option>
<option value="topt_bus_0">尊龍</option>
<option value="topt_bus_0">國光</option>
</select>
<select id="topt_air" style="display: none">
<option value="topt_air_0">華信</option>
<option value="topt_air_1">立榮</option>
<option value="topt_air_2">復興</option>
<option value="topt_air_3">遠東</option>
</select>
然後當trip的值改變的時候
<script type="text/javascript">
$('#trip").change( function() {
var tval = $('#trip').val();
if (tval == '') {
$( '
#trip_option' ).html('');
}
else {
var topt_id = 'topt_' + tval;
$( '
#trip_option' ).html(
$( '#' + topt_id ).html()
);
}
});
</script>
把對應select裡面的選項拿出來，塞到trip_option裡面去。
這樣就可以因應母select的改變而調整子select的內容。
這個方法很容易配合MVC使用；不用MVC也很容易把php和html分開。
例如
<?php
$trip_options = Array(
'bus' => Array('統聯', '和欣', '尊龍', '國光')
, 'air' => Array('華信', '立榮', '復興', '遠東')
, 'rail' => Array('莒光號', '自強號', '區間車')
);
?>
<?php foreach ($trip_options as $tkey => $topts) : ?>
<select id="topt_<?php echo $tkey ?>" style="display: none;">
<?php foreach ($topts as $tnum => $topt) : ?>
<option value="topt_<?php echo $tkey ?>_<?php echo $tnum ?>">
<?php echo $topt; ?>
</option>
<?php endforeach; ?>
</select>
<?php endforeach; ?>
當然你可以用ajax。只是如果你的子選單都很短，那這不失為一個方
法，可以降低網頁前後端間通訊的負擔。
--
從前有個馬鈴薯王國 有個高貴偉大的國王
有的人尊敬他 有的人畏懼他 但有個人敢看不起他不只是一條龍
嘿呵 快出動 去征服 去擺平 嘿呵 快出征 去征服那條龍
嘿呵 快出動
(宰了它!轟了它!)嘿呵 快出征 去征服那條龍
:■ Potatoes and Dragons (C)Alphanim France 2004-05 :.
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.160.177.60
1F：推 rjackie:但這樣從資料庫讀出的值要如放呢?\ 06/22 00:03
2F：→ MOONRAKER:阿比照$trip_options不就結了 我code通通都給你了咧 06/22 06:02