作者tkdmaf (皮皮快跑)
看板PHP
標題Re: [請益] 請教各位高手關於兩階層下拉選單疑問
時間Fri Jun 22 00:55:14 2012
※ 引述《rjackie (剛到了~~)》之銘言：
: 這樣的做法我稍微的了解運作方式了，
: 先感謝各位高手的指點。
: 但如果是同一個<form>中是否可做到
: 文字搜尋以及這樣的兩階層式下拉選單並存呢?
: 是否是利用先判斷文字欄位是否為空後再判斷
: 下拉選單是否有值這樣的方式?
: 因為同一個<from>只會有一刻按鈕或是文字超連結
: 可以送出資料不是嗎?
首先我把有帶入php的程式碼重新貼一份上來。
這是用縣市為例子。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
<?php
$area = array(
1=>array('北部',array(1=>'基隆市',2=>'台北市',3=>"新北市",4=>"桃園縣"
,5=>"新竹縣",6=>"新竹市")),
2=>array('中部',array(7=>"苗栗縣",8=>"台中市",9=>"南投縣",10=>"彰化縣"
,11=>"雲林縣")),
3=>array('南部',array(12=>"嘉義縣",13=>"嘉義市",14=>"台南市",
15=>"高雄市",16=>"屏東縣")),
4=>array('東部',array(17=>"宜蘭縣",18=>"花蓮縣",
19=>"台東縣")),
5=>array('外島',array(20=>"澎湖縣",21=>"金門縣",22=>"連江縣"))
);
?>
var mydata = <?php echo json_encode($area)?>
//如果不使用php，json格式會是下面的樣子。
//{
// 1:["北部",{1:"基隆市",2:"台北市",3:"新北市",4:"桃園縣",5:"新竹縣",6:"新竹市"}],
// 2:["中部",{7:"苗栗縣",8:"台中市",9:"南投縣",10:"彰化縣",11:"雲林縣"}],
// 3:["南部",{12:"嘉義縣",13:"嘉義市",14:"台南市",15:"高雄市",16:"屏東縣"}],
// 4:["東部",{17:"宜蘭縣",18:"花蓮縣",19:"台東縣"}],
// 5:["外島",{20:"澎湖縣",21:"金門縣",22:"連江縣"}]
//}
$(function(){
set_sel1_option();
do_select();
$('#sel1').change(do_select);
})
function set_sel1_option(){
for(var key in mydata){
var value = mydata[key][0];
$('#sel1').append('<option value="'+key+'">'+value+'</option>')
}
}
function do_select(){
$('#sel2').html('');
var sel1_value = $('#sel1 option:selected').val();
var sel2_op = mydata[sel1_value][1];
for(var key in sel2_op){
var value = sel2_op[key]
$('#sel2').append('<option value="'+value+'">'+value+'</option>')
}
}
</script>
</head>
<body>
<select id="sel1"></select>
<select id="sel2"></select>
</body>
</html>
上面可以整個複製貼上來使用，不過記得載入jquery
-----------------------------------------------------------------------
再來就是你這邊提到的問題。
基本上，jquery的ajax就可以讓你表單的東西直接post出去。
之後再接回傳回的資料或是畫面。
也就是說，你並不一定要經過form表單和表單內的submit的動作一樣可以做出
post傳遞的行為，而且可以指定要傳送那幾個欄位的資料。
大致如下：
$.post('處理的網址'[,傳送的post資料][,處理完成後進行的動作][,傳回的資料格式])
例：
$.post('處理資料的網址',{
'account':$('#account').val();
},function(data){
alert(data)
},'json')
這邊是表示我要送出account去判斷，可能是判斷像註冊會員帳號是不是已被使用。
判斷完成後會回傳內容經用function的第一個參數回傳。
這邊是將data直接alert()出來，而data的回傳格式採用json。
要注意的是說，除了處理的網址一定要給，後面的參數都是可以省略的。
這邊比較特別是和一些函式用法不同的是他具備「參數省略」的功能。
也就是說，如果你不傳送任何post參數時，可能將那個參數直接整個省略掉。
像上例如果不傳account，你可以直接這樣寫：
$.post('url',function(data){
alert(data);
},'json');
jquery真的很方便，可以幫助你處理很多繁雜的程序。
但是不是說有了jquery就不需要專注在javascript。
最近看了幾本像是王者歸來javascript、javascript設計模式。
多了解一些這方面的東西，再搭配php就可以做出很多你想要的效果。
尤其是外掛的寫法。
會寫外掛的話，在多個專案要使用相同的功能時會相當的方便。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.97.168
1F：推 kuAIpAI:推~ 感謝分享經驗~~ 06/22 11:24
2F：推 rjackie:非常感謝，新手練功中，感謝。 07/01 22:12