Esto no debería ser tan difícil... Un poco oxidado con Javascript y jQuery y creo que me estoy perdiendo algo obvio.
Ejemplo de código. DOM abreviado
<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>Código del script (no funciona)
$('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(); Lo que no entiendo es por qué this.value devuelve indefinido en el script pero funciona como esperaría en la consola de depuración
Captura de pantalla de resultados de depuración.
Como usó la función de flecha en el alcance de checkCountryChange, creo que this pertenece al alcance superior dentro de él, así que reemplace la función de flecha con la función normal para solucionar el problema.
$('#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>Si el elemento tiene id , solo puede usar la id para el selector de consultas. Luego, puede encontrar la opción seleccionada.
$('#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 });