Following code very useful select one value of multi drop down (select) , show out put value define container.
Js is pick this url: mootools-core-1.4.5-nocompat.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Multiple Drop Down out put one container</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type='text/javascript' src='mootools-core-1.4.5-nocompat.js'></script>
<script language="javascript">
function run(val) {
if(val==1)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra").value;
document.getElementsByName("Ultra2")[0].value="drop2";
document.getElementsByName("Ultra3")[0].value="drop3";
}
else if(val==2)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra2").value;
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra3")[0].value="drop3";
}
else if(val==3)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra3").value;
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra2")[0].value="drop2";
}
else{
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra2")[0].value="drop2";
document.getElementsByName("Ultra3")[0].value="drop3";
}
}
</script>
</HEAD>
<BODY onLoad="run()">
<table cellpadding="10" cellspacing="10" ><tr><td>
Drop1 <select id="Ultra" onchange="run(1)" name="Ultra" > <!--Call run() function-->
<option value="drop1">Select</option>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select></td>
<td>
Drop2 <select id="Ultra2" onchange="run(2)" name="Ultra2" > <!--Call run() function-->
<option value="drop2">Select</option>
<option value="4">text4</option>
<option value="5">text5</option>
<option value="6">text6</option>
</select></td>
<td>
Drop3 <select id="Ultra3" onchange="run(3)" name="Ultra3" > <!--Call run() function-->
<option value="drop3">Select</option>
<option value="7">text7</option>
<option value="8">text8</option>
<option value="9">text9</option>
</select></td>
</tr></table>
<!-- main container Start -->
<div id="srt" style="padding:0 0 0 20px;">OutPut Area </div>
<!-- main container End -->
</BODY>
</HTML>
Js is pick this url: mootools-core-1.4.5-nocompat.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Multiple Drop Down out put one container</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type='text/javascript' src='mootools-core-1.4.5-nocompat.js'></script>
<script language="javascript">
function run(val) {
if(val==1)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra").value;
document.getElementsByName("Ultra2")[0].value="drop2";
document.getElementsByName("Ultra3")[0].value="drop3";
}
else if(val==2)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra2").value;
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra3")[0].value="drop3";
}
else if(val==3)
{
document.getElementById("srt").innerHTML = document.getElementById("Ultra3").value;
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra2")[0].value="drop2";
}
else{
document.getElementsByName("Ultra")[0].value="drop1";
document.getElementsByName("Ultra2")[0].value="drop2";
document.getElementsByName("Ultra3")[0].value="drop3";
}
}
</script>
</HEAD>
<BODY onLoad="run()">
<table cellpadding="10" cellspacing="10" ><tr><td>
Drop1 <select id="Ultra" onchange="run(1)" name="Ultra" > <!--Call run() function-->
<option value="drop1">Select</option>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select></td>
<td>
Drop2 <select id="Ultra2" onchange="run(2)" name="Ultra2" > <!--Call run() function-->
<option value="drop2">Select</option>
<option value="4">text4</option>
<option value="5">text5</option>
<option value="6">text6</option>
</select></td>
<td>
Drop3 <select id="Ultra3" onchange="run(3)" name="Ultra3" > <!--Call run() function-->
<option value="drop3">Select</option>
<option value="7">text7</option>
<option value="8">text8</option>
<option value="9">text9</option>
</select></td>
</tr></table>
<!-- main container Start -->
<div id="srt" style="padding:0 0 0 20px;">OutPut Area </div>
<!-- main container End -->
</BODY>
</HTML>
No comments:
Post a Comment