Using a variable as JQuery selector

Question

I have a dropdown/select menu that shows and hides various divs based on what the user has selected. Within each div there is another dropdown/select menu that I would like to also trigger an action on change.

As this div is given an ID dynamically I am struggling to figure out how to select the required dropdown/select menu.

Here is the jQuery code:

$(document).ready(function(){

    $("#category").change(function(){
        var category = $("#category").val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();
    }) ;

    var category = $("#category").val();
    var selector = 'selector_'+category;

    $("#"+selector).change(function(){
        alert('Do something');
    });
});

And some simplified HTML:

<select id='category'>
    <option value='0'>1</option>
    <option value='1'>2</option>
    <option value='2'>3</option>
</select>

<div class='box class-name' id='1'>
    <select id='selector_1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='2'>
    <select id='selector_2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='3'>
    <select id='selector_3'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>

The divs show and hide as desired, but I can't for the life of me get the alert('Do Something'); to trigger which I assume is a problem with how I am trying to select the dropdown/select menu.

All help much appreciated!

Cheers, DB.

Have you considered $('.class-name:visible').change(function(){ alert('Do something');}); ? Tell us more about the second part that's not working... — Jeromy French
– Jeromy French, Commented Jun 28, 2016 at 3:36

Renato Back · Accepted Answer · 2016-06-28 03:46:12Z

1

You need chain the changes. The way you made it, the code runs all at once, meaning:

When document ready, do:
Set onChange in the #category element
Find category current value (right now, none is selected, so value is undefined)
Set selector to "selector_" + undefined
Find element with id selector, since there's no element with this id, no change is defined.

Try this, instead:

$(document).ready(function() {
    var categoryField = $("#category");
    categoryField.change(function() {
        var category = categoryField.val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();

        var selector = 'selector_'+category;

        $("#"+selector).change(function() {
            alert('Do something');
        });
    });
});

answered Jun 28, 2016 at 3:46

Renato Back

7561 gold badge11 silver badges21 bronze badges

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

2 Comments

Dingo Bruce Over a year ago

Thank you, I've accepted this answer as it remains closest to my original code and explains why my original code was not working - I needed to "chain the changes"! This has helped me achieve what I want but also helped me learn. Thanks to all the other answers also!

Renato Back Over a year ago

I'm glad it helped you. If the inside instructions of the selector "change" are always the same, there are better ways to do it, because this way is always setting the same change on an input, even if it has previously been set.

Thao Ngo · Accepted Answer · 2016-06-28 03:39:52Z

0

var category = $("#category").val();

Category is empty on page loaded.

Simple solution:

$(".box select").change(function(){
    alert('Do something');
});

answered Jun 28, 2016 at 3:39

Thao Ngo

3,7811 gold badge23 silver badges24 bronze badges

Comments

Sami · Accepted Answer · 2016-06-28 03:40:00Z

0

I checked, it's working

$("#category").change(function(){    
    var category = $("#category").val();
    var box = $('#'+ category);        
    $('.class-name').hide();
    box.show();
    var s = $(box).find('select');        
    $(s).bind("change", function() { 
       alert("Do something"); 
    })
})

answered Jun 28, 2016 at 3:40

Sami

3,8204 gold badges19 silver badges30 bronze badges

Comments

brk · Accepted Answer · 2016-06-28 03:52:08Z

0

Within each div there is another dropdown/select menu that I would like to also trigger an action on change.

It seems you are looking to trigger event when there is a change in the dropdowns wrapped by the div

If it is so you can use jquery wild card selector

In your case all those select elements have same prefix id.

So $("[id^=selector_]") will response to to any select box which have such string as prefix

 $("[id^=selector_").change(function(event){
      $("#demoUp").text($(this).context.value);
    });

Check this JSFIDDLE. The placeholder will be updated by the value of selectd option

answered Jun 28, 2016 at 3:52

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Jack jdeoel · Accepted Answer · 2016-06-28 03:56:45Z

0

To point you have change the id on document page ,use below

$(document).on("change",$("#"+selector),function(){
        alert('Do something');
});

answered Jun 28, 2016 at 3:56

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Comments

Govind Samrow · Accepted Answer · 2016-06-28 04:00:48Z

0

Try this:

$(document).ready(function(){

    $("#category").change(function(){
        var category = $(this).val();
        $('.class-name').hide();
        $('#'+ category).show();

        $("#selector_"+category).change(function(){
            alert('Do something');
        });
    }) ;

});

answered Jun 28, 2016 at 4:00

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

Collectives™ on Stack Overflow

Using a variable as JQuery selector

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related