I'm attempting to simplify my fundraising page, and would like to show exactly how much each donation would help us out. I've listed the options below, but I would like for the first two dropdown boxes to change the third one depending on the combination chosen. Fruthermore, I'd like for the third dropdown box to adjust the first two if that one is selected. IFFTT, basically. No action needed beyond that, as it's mostly meant for informative purposes. Is this possible? Thanks for any help whatsoever.

Examples:
1 donation of $50 = 1 hour of gym time.
10 donations of $50 = 10 hours of gym time.
3 donations of $500 = 6 days of gym time.
9 donations of $500 = 27 days of gym time.
3 donations of $5,000 = 3 months of gym time.

<span style="font-size:11px; font-family:arial;">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select> 
donation(s) of
<select>
<option>$50</option>
<option>$500</option>
<option>$5,000</option>
</select> 
= 
<select>
<option>1 hour</option>
<option>2 hours</option>
<option>3 hours</option>
<option>4 hours</option>
<option>5 hours</option>
<option>6 hours</option>
<option>7 hours</option>
<option>8 hours</option>
<option>9 hours</option>
<option>10 hours</option>
<option>3 days</option>
<option>6 days</option>
<option>9 days</option>
<option>12 days</option>
<option>15 days</option>
<option>18 days</option>
<option>21 days</option>
<option>24 days</option>
<option>27 days</option>
<option>30 days</option>
<option>1 month</option>
<option>2 months</option>
<option>3 months</option>
<option>4 months</option>
<option>5 months</option>
<option>6 months</option>
<option>7 months</option>
<option>8 months</option>
<option>9 months</option>
<option>10 months</option>
</select> 
of gym time.</span>

Recommended Answers

All 3 Replies

Would you think something like this?

<!DOCTYPE html>
<head>
    <script type="text/javascript">
    function donation(){
        this.dnts = [1,2,3,4,5,6,7,8,9,10];
        this.cost = [50,500,5000];
        this.unit = ['hours', 'days', 'months'];
        this.selected = [0,0];
        this.init = function(){
            this.dn = document.getElementById('dn');
            this.sm = document.getElementById('sm');
            this.rs = document.getElementById('rs');
            this.dn.innerHTML="";
            for(var i in this.dnts){
                this.dn.innerHTML += '<option>'+(this.dnts[i])+'</option>';
            }
            this.sm.innerHTML="";
            for(var i in this.cost){
                this.sm.innerHTML += '<option>$'+(this.cost[i])+'</option>';
            }
            this.rs.innerHTML="";
            for(var c in this.cost){
                for(var d in this.dnts){
                    this.rs.innerHTML += '<option>'+(Number(c)===1?this.dnts[d]*3:this.dnts[d])+' '+(this.unit[c])+'</option>';
                }
            }
        }
        this.update = function(fromResult){
            if(fromResult){
                this.dn.selectedIndex = this.rs.selectedIndex % 10;
                this.sm.selectedIndex = Math.floor(this.rs.selectedIndex / 10);
            }
            else {
                this.rs.selectedIndex = this.dn.selectedIndex + (this.sm.selectedIndex*10);
            }
        }
    }
    var dnt = new donation;
    </script>
</head>
<body onload="dnt.init();">
<div>
<span style="font-size:11px; font-family:arial;">
<select id="dn" onchange="dnt.update();">
</select> 
donation(s) of
<select id="sm" onchange="dnt.update();">
</select> 
= 
<select id="rs" onchange="dnt.update(1);">
</select> 
of gym time.</span>
</div>
</body>
</html>
commented: Wow, that is flawlessly what I meant! +1

YES! That is exactly what I needed. Thank you so very much!!!

Another version mutch more compact and easy to configure

    <script type="text/javascript">
    function donation(){
        this.range = {'min':1,'max':10};
        this.unit = {'hours':50, 'days':500, 'months':5000};
        this.init = function(){
            var sel = ['dn','sm','rs'];
            for(var k in sel){
                this[sel[k]] = document.getElementById(sel[k]);
            }
            this.dn.innerHTML="";
            for(var i=this.range.min; i<=this.range.max; i++){
                this.dn.innerHTML += '<option>'+(i)+'</option>';
            }
            this.sm.innerHTML="";
            for(var u in this.unit){
                this.sm.innerHTML += '<option>$'+(this.unit[u])+'</option>';
            }
            this.rs.innerHTML="";
            for(var u in this.unit){
                for(var i=this.range.min; i<=this.range.max; i++){
                    this.rs.innerHTML += '<option>'+(u=='days'?i*3:i)+' '+(u)+'</option>';
                }
            }
        }
        this.update = function(fromResult){
            if(fromResult){
                this.dn.selectedIndex = this.rs.selectedIndex % 10;
                this.sm.selectedIndex = Math.floor(this.rs.selectedIndex / 10);
            }
            else {
                this.rs.selectedIndex = this.dn.selectedIndex + (this.sm.selectedIndex*10);
            }
        }
    }
    var dnt = new donation;
    </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.