Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-22-2011, 10:59 AM   PM User | #1
Solistic
New to the CF scene

 
Join Date: May 2011
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
Solistic is an unknown quantity at this point
Using incremental class/names for multiple dropdown selects, target next one.

Hi Guys,

basically I have 6 dropdowns which ask the user a set of questions, the next dropdown will then show different questions based on the answers from the previous one. Not all dropdowns are used and the user may get the final answer by using only 4 of the 6 dropdowns. To keep the page neat and tidy i'm hiding all the dropdowns apart from the first, and only showing the next one if there's another question to be asked, if they have reached the answer then it is not shown. This is the code i'm using at the moment, and i'm just wondering if there's a neater way to do it using some sort of increment for the class name of the dropdown.

Code:
<select name="q1Select" class="q1Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>
    <select name="q2Select" class="q2Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>
    <select name="q3Select" class="q3Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>
    <select name="q4Select" class="q4Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>
    <select name="q5Select" class="q5Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>
    <select name="q6Select" class="q6Select">
    <option value="0">Is the property...</option>
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    </select>



    <script>
    
    // This code handles fading in the next question dropdown if the answer hasn't been answered yet.
    		
    $('.q1Select').change(function() {
    var dropval = $(this).val();
    var refsplit = dropval.split('-');
    var ref1 = refsplit[0];
    if (ref1 != "pump") {
    $('.q2Select').fadeIn('slow')
    }
    });
    
    $('.q2Select').change(function() {
    var dropval = $(this).val();
    var refsplit = dropval.split('-');
    var ref1 = refsplit[0];
    if (ref1 != "pump") {
    $('.q3Select').fadeIn('slow')
    }
    });
    
    $('.q3Select').change(function() {
    var dropval = $(this).val();
    var refsplit = dropval.split('-');
    var ref1 = refsplit[0];
    if (ref1 != "pump") {
    $('.q4Select').fadeIn('slow')
    }
    });
    
    $('.q4Select').change(function() {
    var dropval = $(this).val();
    var refsplit = dropval.split('-');
    var ref1 = refsplit[0];
    if (ref1 != "pump") {
    $('.q5Select').fadeIn('slow')
    }
    });
    
    $('.q5Select').change(function() {
    var dropval = $(this).val();
    var refsplit = dropval.split('-');
    var ref1 = refsplit[0];
    if (ref1 != "pump") {
    $('.q6Select').fadeIn('slow')
    }
    });
        	
    
    
    // This code fades in the answer to the questions.
    
    $('select').change(function() {
    var test = $(this).val();
    var refsplit = test.split('-');
    var ref1 = refsplit[0];
    var ref2 = refsplit[1]
    if (ref1 == "pump") {
    $('.answer').hide(); $('.answer.pump-' + ref2).fadeIn('slow'); }
    else  $('.answer').fadeOut('slow');
    });
    
    </script>

"pump" is the class assigned to an answer, so if a user gets their answer then it'll fade in the answer relating to their questions eg 'pump12'

Thanks in advance.
Solistic is offline   Reply With Quote
Reply

Bookmarks

Tags
jquery

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:46 AM.


Advertisement
Log in to turn off these ads.