Double combo box year range problem

**pepe_lepew1962** · 03-09-2014, 09:52 PM

Hello:

I have a problem that I have searched the internet for without success and I could now use help with. I am trying to get 2 combo boxes that lists the years from say ...1925 to 2014. The first combo box would be the FROM box range and the second box the TO box range, these values will later be used in a search query. How do I limit the years in the TO combo box to display greater than or equal to the FROM combo box value (year). It seems and looks stupid to list previous years in the TO box based on what is selected in the FROM. I am thinking this is a javascript thing based on the examples I have seen. So if some selects 1927 in the FROM field, the TO field would start at 1927 onward thru to 2014.

HTML Code:

    <select class="drange" name="form_from"> 
       <option value="" selected="selected"></option>
       <option value="1925" >1925</option>
       <option value="1926" >1926</option>
       <option value="1927" >1927</option>
       <option value="1928" >1928</option>
       <option value="1929" >1929</option>
       <option value="1930" >1930</option>
    </select>&nbsp;&nbsp;&nbsp; TO:&nbsp;
    <select class="drange" name="form_to"> 
       <option value="" selected="selected"></option>
       <option value="1925" >1925</option>
       <option value="1926" >1926</option>
       <option value="1927" >1927</option>
       <option value="1928" >1928</option>
       <option value="1929" >1929</option>
       <option value="1930" >1930</option>
    </select>

**coothead** · 03-10-2014, 10:07 AM

Hi there pepe_lepew1962,

one possible solution has been provided here...

http://www.htmlforums.com/showpost.p...38&postcount=2

coothead

**vwphillips** · 03-10-2014, 12:19 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
From <select id="from" ></select>  To <select id="to" ></select> <input type="button" name="" value="Populate" onclick="zxcFromTo.Populate('from',1925,2014);" />

<script type="text/javascript">
/*<![CDATA[*/

var zxcFromTo={

 Populate:function(id,fn,tn){
  var o=this['zxc'+id];
  if (o&&typeof(fn)=='number'&&typeof(tn)=='number'&&fn<tn){
   o.f.options.length=o.t.options.length=0;
   for (var z0=fn;z0<=tn;z0++){
    o.f.options[z0-fn]=new Option(z0,z0);
    o.t.options[z0-fn]=new Option(z0,z0);
   }
  }
 },

 init:function(o){
  var id=o.FromID,f=document.getElementById(id),t=document.getElementById(o.ToID),fn=o.FromNumber,tn=o.ToNumber;
  if (f&&t&&typeof(fn)=='number'&&typeof(tn)=='number'&&fn<tn){
   o.id=id;
   o.f=f;
   o.t=t;
   this.addevt(f,'change','change',o,f);
   this.addevt(t,'change','change',o,t);
   this['zxc'+id]=o;
   this.Populate(id,fn,tn);
  }
 },

 change:function(o,s){
  var v=s.value,fn=s==o.f?v:o.f.options[1].value,tn=s==o.f?o.t.options[o.t.options.length-1].value:v;
  this.Populate(o.id,fn*1,tn*1);
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

zxcFromTo.init({
 FromID:'from',
 ToID:'to',
 FromNumber:1925,
 ToNumber:2014

});
/*]]>*/
</script></body>

</html>

**Deadweight** · 03-10-2014, 05:12 PM

Here is what i put together.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check Range</title>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

var array = new Array();

$(function(){
	set_up({id:"one", minyear:1925, maxyear: 2014, selectedyear: 2012, style: 0})
	set_up({id:"two", minyear:1925, maxyear: 2014, selectedyear: 2013, style: 1})
})


function set_up(a){
	array.push(a.style)
	$('#'+a.id).addClass('bce_option_creation_v0-1')
	for(i=a.maxyear; i>=a.minyear; i--){
		if(i==a.selectedyear){
			$('#'+a.id).append('<option selected>'+i+'</option>')	
		}else{
			$('#'+a.id).append('<option>'+i+'</option>')	
		}
	}
}


$(document).on('change','.bce_option_creation_v0-1', function(){
	$('body .bce_option_creation_v0-1').css('border','1px solid grey')
	for(i=0; i<$('body .bce_option_creation_v0-1').length-1; i++){
		if(array[i]<=array[i+1] && $('body .bce_option_creation_v0-1').eq(i).val()<=$('body .bce_option_creation_v0-1').eq(i+1).val()){
			//alert('ok')
		}else if(array[i]>=array[i+1] && $('body .bce_option_creation_v0-1').eq(i).val()>=$('body .bce_option_creation_v0-1').eq(i+1).val()){
			//alert('ok')
		}else{
			alert('Error')
			$('body .bce_option_creation_v0-1').eq(i).css('border','1px solid red')
		}
	}
})


</script>

</head>
<body>
From
<select id="one">
</select>
To
<select id="two">
</select>
</body>
</html>

**zealouss** · 03-18-2014, 10:35 AM

//Here is my approach

Code:

<html>
	<head>
		<script type = "text/javascript">
		var currentYear = new Date().getFullYear(); //get current year so we don't have to change code every year
		
		function focused(){
			var objFormFrom = document.getElementById("optFrom");
			
			 for(var i = 1924; i <= currentYear; ++i){
				objFormFrom.options[objFormFrom.options.length] = new Option(i,i);
			}
		}
		function selected(){
			var objFormFrom = document.getElementById("optFrom");
			var objFormTo = document.getElementById("optTo");
			var start = objFormFrom.value;
			objFormTo.options.length = 1;
			if (start != ""){
				for (var i = start; i <= currentYear; ++i){
				objFormTo.options[objFormTo.options.length] = new Option(i,i);
				}
			}
		}
	
	
	</script>
	</head>

	<body>


	<select class="drange" name="form_from" id ="optFrom" onfocus="focused()" onchange ="selected()">
	<option value="" selected="selected">Select Year</option>
	</select>
	&nbsp;&nbsp;&nbsp; TO:&nbsp;
    <select class="drange" name="form_to" id = "optTo"> 
    <option value="" selected="selected">Select Year</option>
       
    </select>

	
	</body>
</html>

//Hope this will help