Tengo un menú desplegable que tiene muchas zonas horarias como opciones:
<select data-drupal-selector="edit-field-user-timezone" id="edit-field-user-timezone" name="field_user_timezone"> <option value="_none" selected="selected"></option> <optgroup label="Africa"> <option value="Africa/Asmara">Asmara</option> <option value="Africa/Bamako">Bamako</option> <option value="Africa/Bangui">Bangui</option> <option value="Africa/Banjul">Banjul</option>Estoy tratando de seleccionar automáticamente un valor basado en la zona horaria del cliente a través de JavaScript:
<script>document.getElementById("edit-field-user-timezone").selectedIndex = Intl.DateTimeFormat().resolvedOptions().timeZone</script>Pero esto no está haciendo nada. ¿Qué estoy haciendo mal?
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone) de hecho genera mi zona horaria correcta en el mismo formato del menú desplegable.
Gracias
Prueba esto:
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone const option = Object.values(document.getElementById("edit-field-user-timezone").options) option.map(element => { element.value == timezone ? element.selected = true : false }); <select data-drupal-selector="edit-field-user-timezone" id="edit-field-user-timezone" name="field_user_timezone"> <option value="_none" selected="selected"></option> <optgroup label="Africa"> <option value="Africa/Asmara">Asmara</option> <option value="Africa/Bamako">Bamako</option> <option value="Africa/Bangui">Bangui</option> <option value="Africa/Banjul">Banjul</option> </optgroup> </select>selectedIndex le da el índice numérico de la opción seleccionada actual. Es una propiedad de solo lectura. Para seleccionar automáticamente una opción, debe agregarle el atributo seleccionado. En este caso, tendría que encontrar la opción (o el índice de la opción) con el valor que coincida con la zona horaria, luego alternar el atributo selected de esa opción.
Como esto:
const options = [...document.getElementById('my-select').children] const targetedValue = 'b' // equivalent to time zone in your case const desiredOption = options.find(option => option.value === targetedValue) desiredOption.selected = true <select id="my-select"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select>