How do get the result from jQuery change method?

Question

This shouldn't be so difficult... A little rusty with Javascript and jQuery and I think I'm missing something obvious.

Code sample. Abbreviated DOM

<select data-drupal-selector="edit-country-code-country" id="edit-country-code-country" name="country_code[country]"
    class="form-select is-empty">
    <option value="" selected="selected">- None -</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="ZW">Zimbabwe</option>
    <option value="AX">Åland Islands</option>
</select>

Code from script (doesn't work)

$('select[id^="edit-country-code-country"]').on('change', () => {
      const $target = $('#opt-in-wrapper');
      const countryNames = drupalSettings.r1;
      const $countrySelected = $('#select2-edit-country-code-country-container').attr('title');

      const countryCode = this.value;
      const test1 = $(this).value;
      const this2 = $(this).change;
      const this3 = $(this).data();

      const elem = $(this);
      const test5 = elem.value;
      const test6 = elem.value();

What I don't understand is why this.value returns undefined in the script but works as I would expect in the debug console

Debug results screenshot.

Does this answer your question? [jQuery Get Selected Option From Dropdown](https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Don't Panic, Dec 11 '21 at 08:12

HDM91 · Accepted Answer · 2021-12-11T18:19:55.200

1

As you used arrow function in the scope of checkCountryChange, I think this belong to upper scope inside it so Replace arrow function with regular function to fix the issue.

$('#edit-country-code-country').on('change', function(){
    alert(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <select data-drupal-selector="edit-country-code-country" id="edit-country-code-country" name="country_code[country]"
        class="form-select is-empty">
        <option value="" selected="selected">- None -</option>
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="ZW">Zimbabwe</option>
        <option value="AX">Åland Islands</option>
    </select>

edited Dec 11 '21 at 18:19

answered Dec 11 '21 at 06:35

HDM91

1,318
9
16

Thank you for the suggestion. But no, the ES6 is transpiled before consumption – sea26.2 Dec 11 '21 at 17:33
this code does not work for you ? – HDM91 Dec 11 '21 at 17:40
1

what is 'this' if you log it? in you screenshot you debug arrow function so 'this' maybe belong to upper context – HDM91 Dec 11 '21 at 17:54
1

Actually, you were right! I totally forgot about the upper context part. Marking this as the correct answer – sea26.2 Dec 11 '21 at 18:02

score 0 · Answer 2 · answered Dec 11 '21 at 06:34

If the element has id, you can just use the id for the query selector. Then, you can find the selected option.

$('#edit-country-code-country').change(function() {
    var $option = $(this).find('option:selected');
    var code = $option.val(); // to get selected country code
    var name = $option.text(); // to get selected country name
});

How do get the result from jQuery change method?

2 Answers2