Combine multiple simple jQuery functions

Question

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");
    }
});

try my code and let me know...

Luca Filosofi
– Luca Filosofi

2015-10-03 20:51:06 +00:00
Commented Oct 3, 2015 at 20:51 — Luca Filosofi
– Luca Filosofi, Commented Oct 3, 2015 at 20:51

score 1 · Accepted Answer · 2015-10-04 12:53:43Z

1

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");
        }
    });
});

edited Oct 4, 2015 at 12:53

answered Oct 4, 2015 at 11:46

user4120314

Sign up to request clarification or add additional context in comments.

Comments

Tariq · Accepted Answer · 2015-10-03 19:46:31Z

1

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

edited Oct 3, 2015 at 19:46

answered Oct 3, 2015 at 19:37

Tariq

2,8813 gold badges24 silver badges29 bronze badges

5 Comments

Maximillian Laumeister Over a year ago

That slides up the option, not the box.

Dejavu Over a year ago

Thank you but box is not the child of the .option.

Tariq Over a year ago

The box doesn't have to be a child. it's enough to call the id of the box to hide it. I used the option id so I get the id number used in both the option and the box.

Dejavu Over a year ago

Could you please update your first code? I couldn't figure out how to slide down th box with your code

Dejavu Over a year ago

As I said before, your code slides/hides the option not the box.

Luca Filosofi · Accepted Answer · 2015-10-03 20:50:22Z

0

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");
        }
    });
});

edited Oct 3, 2015 at 20:50

answered Oct 3, 2015 at 20:43

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

4 Comments

Dejavu Over a year ago

Pretty complicated :)

Luca Filosofi Over a year ago

complicated? with these few lines of code you don't have to rewrite all your html code. ( because your html code need to be rewrite you know this?)

Dejavu Over a year ago

You are right. I am trying to put the dropdown and the bos in a container to find out another way. Just updated my code.

Luca Filosofi Over a year ago

@Dejavu: so what about my code.. it works or not? do you need more help just let me know.

souparno majumder · Accepted Answer · 2015-10-03 23:36:53Z

0

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");
  }
});

edited Oct 3, 2015 at 23:36

answered Oct 3, 2015 at 21:55

souparno majumder

2,0623 gold badges30 silver badges52 bronze badges

2 Comments

Dejavu Over a year ago

It slides the dropdown if I choose an option rather than "Other"

souparno majumder Over a year ago

@Dejavu you, needed to get var parent = $($(this).parent()).parent(); for your html structure (since the container parent is a parent of parent of select), also the $(".box").slideUp(); needes to be mentioned on top. jsfiddle.net/#&togetherjs=66wOuC1roU

Collectives™ on Stack Overflow

Combine multiple simple jQuery functions

4 Answers 4

Comments

5 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related