Reduce redundant function with javascript

Question

I currently have the following Javascript running on my website, but I really feel like it is really redundant. So I am trying to condense it, since they are basically all the same thing, except different numbers appended. Is there a way I can wildcard the string?

$(document).ready(function() {

    $('#type_1').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_1').show();
        }else {
            $('#dropdown_list_1').hide();
        }
    });

    $('#type_2').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_2').show();
        }else {
            $('#dropdown_list_2').hide();
        }
    });

    $('#type_3').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_3').show();
        }else {
            $('#dropdown_list_3').hide();
        }
    });

    $('#type_4').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_4').show();
        }else {
            $('#dropdown_list_4').hide();
        }
    });

    $('#type_5').change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_5').show();
        }else {
            $('#dropdown_list_5').hide();
        }
    });

});

This is what I have tried so far, but I couldn't get it to work. I believe it's because the for loop only runs once, and not on each event.

for(var i = 1; i <= 15; i++){
    $('#type_'+i).change(function(){
        if($(this).attr('value') == "dropdown"){
            $('#dropdown_list_'+i).show();
        }else {
            $('#dropdown_list_'+i).hide();
        }
    });
}

EDIT: I uploaded a JSFiddle if you want to test the code out.

HTML:

<form>
    <hr class="separate" />
    <!-- Question 1 -->

    <h3 class="question_title">Survey Question 1</h3>
    <label for="question_1">Question 1</label>
    <input type="text" name="question_1" value="" class="question_field" id="question_1">

    <label for="type_1">Type for Question 1</label>
    <div class="option_field">
        <select name="type_1" id="type_1" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating10">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_1" class="dropdown_list">
        <label for="question_1_list">Question 1 List</label><input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
    </div>

    <hr class="separate" />
    <!-- Question 2 -->


    <h3 class="question_title">Survey Question 2</h3>
    <label for="question_2">Question 2</label><input type="text" name="question_2" value="" class="question_field" id="question_2">


    <label for="type_2">Type for Question 2</label>
    <div class="option_field">
        <select name="type_2" id="type_2" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating20">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_2" class="dropdown_list">
        <label for="question_2_list">Question 2 List</label><input type="text" name="question_2_list" value="" class="question_list" id="question_2_list" placeholder="Option A,Option B,Option C,Option D">
    </div>


    <hr class="separate" />
    <!-- Question 3 -->


    <h3 class="question_title">Survey Question 3</h3>
    <label for="question_3">Question 3</label><input type="text" name="question_3" value="" class="question_field" id="question_3">

    <label for="type_3">Type for Question 3</label>
    <div class="option_field">
        <select name="type_3" id="type_3" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating30">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_3" class="dropdown_list">
        <label for="question_3_list">Question 3 List</label><input type="text" name="question_3_list" value="" class="question_list" id="question_3_list" placeholder="Option A,Option B,Option C,Option D">
    </div>

</form>

Going to have to give us a little bit more so we can help you. HTML + javascript thrown in a jsfiddle. — Mathias Rechtzigel, Jun 05 '14 at 19:11
See here: http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue for why the loop isn't working as you expect. But I'm not marking this as a duplicate, because if you show the HTML we can probably show you a better way that doesn't require a loop at all, but uses classes. — Barmar, Jun 05 '14 at 19:17
I updated the question with a HTML and JSFiddle. (I have 15 questions, but I only included 3) — Arian Faurtosh, Jun 05 '14 at 19:19

Barmar · Accepted Answer · 2014-06-05T19:28:49.067

Give your <select> a class, e.g.

<select name="type_2" class="type" size="1">

Then use DOM traversal functions to find the associated dropdown DIV from the type SELECT:

$(document).ready(function () {
    $(".dropdown_list").hide();

    $(".type").change(function () {
        $(this).closest(".option_field").next(".dropdown_list")
            .toggle($(this).val() == "dropdown");
    });

});

DEMO

Also, you should use .val() to get an input value, not .attr("value").

Reduce redundant function with javascript

1 Answers1