Question

I’m trying to make a change event trigger for several objects in the DOM. Let me show you; I have this code

$(document).ready(function() {
    $(".select_something").change(function() {
        if (!($(".select_something option[value='0']").attr("selected"))) {
            $(".write_something").css('display','');
        }
        else
        {
            $(".write_something").css('display','none');
        }
    });
});

And with this I have several selectors/dropdowns all of which is called .select_something. When the option is not the default value (which is 0), it should show a <textarea></textarea> appear, again all of which is called .write_something.

All in all it’s a quite simplistic function.

The problem I’m experiencing is that this only affects the very first .select_something, .write_something pair, and the rest is unaffected.

I’ve tried mixing around with .find(), .parent() and .children() to see if it could stick, but it don’t.

How can I make it so all of my .select_something, .write_somethingpairs get changed when triggered?

Edit: The IDs was supposed to be classes, of course.

Answer 1

#select_something

Is an id. IDs must be unique over your entire page. If you have multiple elements with this same id, that’s fundamentally wrong (and will cause you massive problems).

Having said that, the fix is easy: change those ids to css classes.

<select id="select_something">

becomes

<select class="select_something">

Then you could select against the css class, but of course you’ll have to select the : write_something element relative to the current select. Something like this might work depending on your structure:

$(".select_something").change(function() {
    if (!($("option[value='0']", this).attr("selected"))) {
        $(this).siblings(".write_something").css('display','');
    }
    else
    {
        $(this).siblings(".write_something").css('display','none');
    }
});