How do I refer to the "$(this)" inside a document on change function?

Question

I'm using a document .on change function to detect the change of a dynamically created dropdown, and I need to access an attribute from within the selected option. So far I have this:

$(document).on('change', 'select', function(event) {
    //Target the chosen option
});

But using a typical $(this) selector won't work inside here. How do I grab the selected option?

Edit: I've found this question which is similar, but it doesn't state how to look for the selected one and get certain attribures jQuery get value of select onChange

Syno · Answer 1 · 2018-07-18T07:08:45.977

0

Apply the on change event on the class from the selects. No matter how many selects there are, the one that has been changed is now the this selector.

$(document).on("change", "select", function() {
    var valueOfSelect = $(this).val();
    alert(valueOfSelect)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dropdowns">
  <option value="1">Hey</option>
  <option value="2">how</option>
  <option value="2">are</option>
  <option value="3">you</option>
</select>

<select class="dropdowns">
  <option value="10">Hey</option>
  <option value="20">how</option>
  <option value="30">are</option>
  <option value="40">you</option>
</select>

edited Jul 18 '18 at 07:08

answered Jul 17 '18 at 13:46

Syno

1,056
10
25

Thanks for the response. I actually can't refer to $('#dropdown') because each dropdown on the page is dynamically created, each with it's own unique ID. I was hoping to initially do $(this).find(':selected') etc etc but the $(this) doesn't work within the function. – Hunter Forest Jul 17 '18 at 14:02
What if you give them the same class and refer to $('.dropdown')? – Syno Jul 17 '18 at 14:11
I think the problem then would be that I'm referencing multiple elements by using a class selector, when really I just need to target the ':selected' child of the 'select' inside the first line of the code. – Hunter Forest Jul 17 '18 at 14:17
Check my updated answer, how about this approach? @HunterForest – Syno Jul 17 '18 at 14:18
Unfortunately a standard change function doesn't work with dynamically created DOM elements which is why I had to use the "document on change" way, only this seems incredibly limiting given that it's so difficult to access the data of the selector! – Hunter Forest Jul 17 '18 at 14:57
Hmm i guess i can't help you @HunterForest – Syno Jul 18 '18 at 07:09

score 0 · Answer 2 · answered Jul 17 '18 at 15:24

0

I have try with your code and $this works properly.

$(document).on("change", "select", function() {
    $(this).val();
})

Look at my JSFiddle : https://jsfiddle.net/ogf4rzw6/11/

answered Jul 17 '18 at 15:24

Jax Teller

1,447
2
15
24

score -1 · Answer 3 · answered Jul 17 '18 at 13:51

// Set a timeout for this function to run after the dynamic select has been populated (this is optional if you need a second for your dynamic content to render)
setTimeout(function(){
    // Loop throough all select fields, you can adjust this to target a single select by class or ID
    $('select').each(function(index){  
        // Set the field variable to a matched select input
        var field = $(this);
        // Set the fieldId variable for the select input ID
        var fieldId = $(this).attr('id');
        // Set the SelectedText variable to store our selected option's text
        var selectedText = $(field).find(":selected").text();
        // Set the SelectedValue variable to store our selected option's value
        var selectedValue = $(field).find(":selected").text();
        // Console log our results and do anything we want with them below
        console.log('Current selected text is ' + selectedText + ' and the value is ' + selectedValue + ' belonging to Select ID ' + fieldId);
    });
    // end the timeout delay, again this is optional you may not need SetTimeout at all or you may not need to loop through all selects, you can target a single one instantly or on call
}, 1000);

How do I refer to the "$(this)" inside a document on change function?

3 Answers3