PDA

View Full Version : 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.



<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.php?p=846238&postcount=2


coothead

vwphillips
03-10-2014, 12:19 PM
<!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.


<!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



<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