作者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