作者qazsd (nice play!)
看板Ajax
標題Re: [問題] 選擇了選單的某一選項後,要能出現文字欄位
時間Tue Nov 13 15:59:25 2007
這是我修改過的原始碼
<select name="region" id="region" >
<option value="0">---請選擇地點---</option>
<option value="國內">台灣本島</option>
<option value="國外">國外</option>
</select>
<select name="place" id="place">
<option value="0">----請選擇----</option>
</select>
<span id="place_other"></span></div>
<script language="JavaScript" type="text/javascript">
//函數：在 IE 中建立 XMLHttpRequest 物件，避免不同瀏覽器的差異性
if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
function XMLHttpRequest() {
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oRequest = new ActiveXObject(arrSignatures[i]);
return oRequest;
} catch (oError) {
//ignore
}
}
throw new Error("MSXML is not installed on your system.");
}
}
//函數：將參數加入到 URL 尾端，以便讓 GET 使用
function addURLParam(sURL, sParamName, sParamValue) {
sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
sURL += encodeURIComponent(sParamName) + "=" +
encodeURIComponent(sParamValue);
return sURL;
}
//-----------------------------------------------------------------------
//
//分別取得兩個選單 的reference
var oRegionList = document.getElementById('region');
var oPlaceList = document.getElementById('place');
//後端傳回 JSON 資料的路徑
var sURLInit = "place.php";
//用來儲存 JSON 的全域變數
var json;
//一開始時先將第二個選單停用
oPlaceList.disabled = true;
//第一個選單的 onchange 事件，用來產生第二個選單的內容
oRegionList.onchange = function() {
//如果選擇的是第一個選項，第二個選單只顯示"請選擇"，並且無法使用。
if(this.selectedIndex == 0) {
oPlaceList.options.length = 0;
oPlaceList.options[0] = new Option("----請選擇----",0);
oPlaceList.disabled = true;
document.getElementById('place_other').innerHTML=' ';
} else {
//如果有選擇其他選項，送出 Ajax 跟後端要求第二個選單的資料。
//產生要求資料的 url，加入第一個選單所選擇的選項值作為參數
sURL = addURLParam(sURLInit,"id",this.options[this.selectedIndex].value);
//建立 XMLHttpRequest 物件，並且送要求
var oRequest = new XMLHttpRequest();
oRequest.open("get", sURL, true);
//接收資料的 callback 函數
oRequest.onreadystatechange = function() {
if(oRequest.readyState == 4) {
//接收到資料後，就將第一個選單啟用
oRegionList.disabled = false;
if(oRequest.status == 200 ){
//接受資料成功，可以從 oRequest.responseText 取得傳回的資料
//轉換為 JSON 的格式
json = "json=" + oRequest.responseText;
json = eval(json);
//產生第二個選單的選項
for(var i=0,j=json.length;i<j;i++) {
oPlaceList.options[i] = new Option(json[i].text,json[i].value);
}
//將第二個選單啟用
oPlaceList.disabled = false;
} else {
//接收資料失敗，可以從 oRequest.statusText 取得錯誤狀態資訊
//將錯誤資訊顯示在第二個選單中
oPlaceList.options[0] = new Option(oRequest.statusText,0);
}
}
}
//選擇選項後先將第一個選單停用，避免重複送出要求
oRegionList.disabled = true;
//送出 Ajax 要求
oRequest.send(null);
}
}
如果有些看不到
請參考前幾篇裡提供的網址，從中可以下載原本的原始檔
※ 引述《TonyQ (骨頭)》之銘言：
: ※ 引述《qazsd (nice play!)》之銘言：
: : 我將
: : if(this.selectedIndex == 0) {
: : oPlaceList.options.length = 0;
: : oPlaceList.options[0] = new Option("----請選擇----",0);
: : oPlaceList.disabled = true;
: : 底下加了這行就OK了
: : document.getElementById('place_other').innerHTML=' ';
: : 不過現在還有一個小問題就是...
: : 當第一個選單是選第二個選項時，緊接著再選第一個選項
: : 那麼第二個選單就會有兩個"其他" (這不是繞口令)
: 因為你沒把第一個選項的onchange提供上來
: 而且我不太確定你的"其他"是指
: 下拉式選單<select>的還是指純文字選項
: 所以能給的訊息還是很少 XD
: 總之你再更動第一個選項的時候
: 第二個選單的重置好像做的不太乾淨 所以才會多新增了一個"其他"
: 簡而言之，先找出會產生"其他"的地方，再來避免多重產生。:)
: 應該只是邏輯上的問題，多找找囉。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.127.20.190