تغییر محتویات کمبو با رویداد onchange کمبوی مرتبط [بایگانی]

ava_a2005

شنبه 18 آذر 1385, 11:19 صبح

با سلام
در یک صفحه asp دو کمبو وجود داره، که قرار هست با انتخاب کمبو ی اول، شهرهای مرتبط با اون در کمبوی دیگری ( کمبوی شهر) نشان دادن بشه )
و قاعدتا باید در رویداد onchange کمیوی اول یک فانکشن نوشته شه که در select آن کمبوی دوم مرتبط پر شه....چطور میشه این کار انجام بشه ولی صفحه refresh نشه یعنی با تغییر کمبوی استان ، کمبوی شهر های مرتبط نشون داده بشه منتها بدون refresh شدن صفحه....
ممنون میشم اگر sample ای در این مورد وجود داره یا راهنماییم کنید....
با تشکر

shahroozj

دوشنبه 20 آذر 1385, 15:47 عصر

فکر کنم این مشکلتان را حل کند :

<html>
<head>
<script language="JavaScript">

// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");

// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");

// third combo box
data_1_1_1 = new Option("111", "*");
data_1_1_2 = new Option("112", "*");
data_1_1_3 = new Option("113", "*");
data_1_2_1 = new Option("121", "*");
data_1_2_2 = new Option("122", "*");
data_1_2_3 = new Option("123", "*");
data_1_2_4 = new Option("124", "*");
data_2_1_1 = new Option("211", "**");
data_2_1_2 = new Option("212", "**");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");

// fourth combo box
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")

// other parameters
displaywhenempty="-empty-"
valuewhenempty=-1

displaywhennotempty="-select-"
valuewhennotempty=0

function change(currentbox)
{
var numb = currentbox.id.split("_");
var currentbox = numb[1];
var i=parseInt(currentbox)+1;
// I empty all combo boxes following the current one
var _t=eval("typeof(document.getElementById('combo_"+i+"'))!='undefined'");
while (_t && document.getElementById("combo_"+i)!=null)
{
var son = document.getElementById("combo_"+i);
// I empty all options except the first (it isn't allowed)
for (m=son.options.length-1;m>0;m--)
son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty);
i=i+1;
}

// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
var stringa='data';
i=0;
_t=eval("typeof(document.getElementById('combo_"+i+"'))!='undefined'");
while (_t && document.getElementById("combo_"+i)!=null)
{
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex");
if (i==currentbox)
break;
i=i+1;
}

// filling the "son" combo (if exists)
var following=parseInt(currentbox)+1;
_t=eval("typeof(document.getElementById('combo_"+following+"'))!='undefined'");
if (_t && document.getElementById("combo_"+following)!=null)
{
son=document.getElementById("combo_"+following);
stringa=stringa+"_";
i=0;
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0))
{
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)");
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)");
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i++;
}
//son.focus();
i=1;
combostatus='';
cstatus=stringa.split("_");
while (cstatus[i]!=null)
{
combostatus=combostatus+cstatus[i];
i=i+1;
}
return combostatus;
}
}
</script>
</head>
<body>
<form ID="Form1">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR>
<BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1">
</option>
</select>
<BR>
<BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1">
</option>
</select>
<BR>
<BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1">
</option>
</select>
</form>
</body>
</html>