Select Lists x2 Generate Target Link

[Total: 0    Average: 0/5]

Use 2 select lists to generate the target href.

Head Code:

<!--
  -- Just for colors...
  -->
<style>
body { background-color: #ADF; }
.s1  { background-color: #DAF; }
.s2  { background-color: #FAD; }
.txt { background-color: #FDD; }
.btn { background-color: #DDF; }
</style>
<script>
/*
 * Create a CLASS to hold the link information.
 */
var LINKS_CLASS=function()
{
  this.Data=new Array();
  this.Add=function(x,y,val)
           {
     if(!this.Data[x])
       this.Data[x]=new Array();
     this.Data[x][y]=val;
   }
  this.Item1=0;
  this.Item2=0;
  this.Sel1=function(i){this.Item1=i;}
  this.Sel2=function(i){this.Item2=i;}
  this.Value=function()
  {
    var x=this.Item1;
    var y=this.Item2;
    if(x<1 || x>=this.Data.length)return "Choose Sel1";
    if(y<1 || y>=this.Data[x].length)return "Choose Sel2";
    var v=this.Data[x][y];
    if(v)return v;
    else return "Data Not Defined";
  }
}
/*
 * Create object of the class
 */
var LINKS=new LINKS_CLASS();
/*
 * Add the data into the object.
 */
LINKS.Add(1,1,"http://www.js-examples.com/");
LINKS.Add(1,2,"http://www.js-examples.com/");
LINKS.Add(2,1,"http://www.js-examples.com/");
LINKS.Add(2,2,"http://www.js-examples.com/");

/*
 * Call this when you choose a select list item.
 */
function sel(_item)
{
  var _form=document.f1;
  var _selI=_form[_item].selectedIndex;
  var _selV=_form[_item].options[_selI].value;
  var _i=_item.substr(1,1);
  eval("LINKS.Sel"+_i+"(_selV);");
  _form.t1.value=LINKS.Value();
  /*
   * set the action of the form to be the url
   */
  _form.action=LINKS.Value();
}
/*
 * Call this when you click the form button
 * it will submit the form
 */
function btnclk()
{
  /*
   * x,y are for testing only.
   * uncomment the alert if you want to see the test data.
   */
  //var x=LINKS.Item1;
  //var y=LINKS.Item2;
  //var v=LINKS.Value();
  // alert(x+'n'+y+'n'+v);
  //document.location=v;
  document.f1.submit();
}
function init()
{
  document.f1.s1.selectedIndex=0;
  document.f1.s2.selectedIndex=0;
}
</script>

Body Code:

<!--
  -- target will create a popup - or reuse a previous popup from 
  -- this code.
  -->
<form name=f1 action="" method="get" target="_newPage">
<select class=s1 name=s1 onchange="sel('s1')">
<option value="0">S1-Choose</option>
<option value="1">S1-First</option>
<option value="2">S1-Second</option>

</select>
<select class=s2 name=s2 onchange="sel('s2')">
<option value="0">S2-Choose</option>
<option value="1">S2-First</option>
<option value="2">S2-Second</option>
</select>
<br>
<input class=txt name=t1 value="">
<input class=btn type=button value="Select 2 First" onclick="btnclk()">
</form>

Times Viewed: 4

Leave a Reply

Your email address will not be published. Required fields are marked *