CODEWITHSUNDEEP
jquery
Dejavu
Dejavu

Reputation: 713

Combine multiple simple jQuery functions

I have a form with several dropdown boxes.

If user choose "Other" from the dropdown menu, another div with an input field will slide down.

The problem is that I have 20+ dropdown boxes like that. Can I create only 1 function to trigger the related one?

Here is my html :

<div class="container">
    <div>
        <select id="option1" name="city">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="London">London</option>
        </select>
    </div>

    <div id="box1">
        <input type="text" name="city-other">
    </div>
</div>

<div class="container">
    <div>
        <select id="option2" name="color">
            <option value="">Please Choose</option>
            <option value="Other">Other</option>
            <option value="Red">Red</option>
        </select>
    </div>

    <div id="box2">
        <input type="text" name="color-other">
    </div>
</div>

And my jQuery code : 

$("#box1").hide();
$('#option1').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box1").slideDown("slow");
    } else {
        $("#box1").slideUp("slow");
    }
});

$("#box2").hide();
$('#option2').on('change', function() {
    if ( this.value == 'Other')
    {
        $("#box2").slideDown("slow");
    } else {
        $("#box2").slideUp("slow");
    }
});

Upvotes: 5

Views: 91

Answers (4)

user4120314
user4120314

Reputation:

Demo : http://jsfiddle.net/fn5ac1f7/

$(function () {
    $(".box").hide();
    $('.option').on('change', function() {
        var parent = $(this).parent().parent();
        var children=$(parent).children()[1];

        if ( this.value == 'Other')
        {
            $(children).slideDown("slow");
        } else {
            $(children).slideUp("slow");
        }
    });
});

Upvotes: 1

souparno majumder
souparno majumder

Reputation: 2052

Use classes

$(".box").slideUp();
$('.option').on('change', function() {
var parent = $($(this).parent()).parent();
var children=$(parent).children()[1];

  if ( this.value == 'Other') {
    $(children).slideDown("slow");
  } else {
    $(children).slideUp("slow");
  }
});

Upvotes: 0

Luca Filosofi
Luca Filosofi

Reputation: 31173

just for fun demo https://jsfiddle.net/mtffje50/

$(function () {
    // hide all div with id starting with "box"
    $("div[id^='box']").hide(); 
    // observe all select with id starting with "option"
    $("select[id^='option']").on('change', function () {
        // do the trick here...
        var name = this.name.toLowerCase() + '-other';
        var $parent = $("input[name='" + name + "']").parent().parent();
        if (this.value.toLowerCase() == 'other') {
            $parent.slideDown("slow");
        } else {
            $parent.slideUp("slow");
        }
    });
});

Upvotes: 0

Tariq
Tariq

Reputation: 2871

Use classes instead of ids and class them like:

$('.option').on('change', function() {
    if ( this.value == 'Other')
    {
        $(this).slideDown("slow");
    } else {
        $(this).slideUp("slow");
    }
});

Edit:
To hide the box, you should get the id of the select input (inside the change function) by this: 

var this_id = $(this)[0].id;
this_id = this_id.split('option')[1]; //get the input id
$("#box" + this_id).hide(); //hide box with same id

Upvotes: 1

Related Questions