Force safari iOS selecciona el componente para actualizar cuando cambian las opciones

Cuando toca una input seleccionada en una página web con iOS (iPhone), aparece un widget giratorio (el "selector") que le permite girar y seleccionar las opciones dentro de esa selección. Digamos que ha tocado uno de estos y el widget selector está abierto. Si está abierto, si usa javascript para modificar las opciones de selección (agregar, eliminar, actualizar opciones a través del dom), estos cambios no se reflejarán en el widget a less que el usuario cierre y vuelva a abrir el widget.

¿Hay alguna forma de obligar al browser a actualizar las opciones automáticamente?

introduzca la descripción de la imagen aquí

Editar: aquí hay un ejemplo que puede usar para observar cómo la actualización de las opciones de selección no actualiza el widget selector: http://jsfiddle.net/RrsNk/

<select id="my-select" /> $(function () { updateSelect(); }); function updateSelect() { $("#my-select").empty(); for (i = 0; i < 5; i++) { var ran = Math.random(); $("<option />").attr("value", ran).html(ran).appendTo("#my-select"); } setTimeout(updateSelect, 2000); } 

Safari usa un UIPickerView para mostrar los menus desplegables. Como era de esperar, el título del componente desplegable en la página se actualiza de acuerdo con los cambios en el DOM, pero la vista del selector no está estrechamente acoplada con el DOM, por lo que no se actualiza. La situación es la misma con Chrome y Opera Mini.

Entonces, en conclusión, no es posible lo que está intentando implementar . Debe search otras forms de hacer que su set de datos sea accesible.

En primer lugar, ¿por qué querrías – deberías ajustar los valores en tu file HTML o con JavaScript mientras se carga la página.

Sin embargo, si los valores cambian a medida que el usuario selecciona el menu desplegable, puede usar JavaScript para seleccionar otro elemento, luego vuelva a seleccionar el menu desplegable, lo que hará que se vuelva a cargar.

Puede enfocar un elemento con el método focus (). P.ej. Document.getElementById ("input"). Focus ();

Me llevaron a esta pregunta como la más cercana a mi caso de uso, que es similar pero no idéntico, y podría aplicarse a otras personas ya que es una situación común. Encontré las respuestas aquí un toque confuso, así que solo quería aclarar mis hallazgos.

  1. Empiezo con un menu desplegable que contiene solo una option : Searching...
  2. Cuando el usuario hace clic, aparece el "selector" (una "tick-list" en el iPad, el mismo principio que el "spinner" en el iPhone), que muestra Searching...
  3. Una llamada AJAX obtiene opciones del server, y JavaScript actualiza las options[] a estas.
  4. En este punto, el selector todavía muestra solo Searching... , y el usuario no tiene idea de que ha sido repoblado. El usuario debe hacer clic afuera para descartar el "selector", y hacer clic en el menu desplegable nuevamente para ver las nuevas opciones.

Así que en mi caso no tengo la situación de OP de querer que se muestre un segundo menu desplegable dependiendo de qué opción se select en el primer menu desplegable. Más bien me gustaría (# 1) que el "selector" desaparezca, y luego (# 2) reaparezca (con las nuevas opciones).

Ahora, parece que puedes hacer # 1, pero no # 2.

  1. Puede descartar el "selector" por dropdown.blur() (probado en Mobile Safari). Consulte Cerrar una list desplegable SELECCIONAR programáticamente con Javascript / jQuery .
  2. No puedes hacer que el "selector" vuelva a aparecer (al less no en Mobile Safari). Consulte Cómo puede progtwigr que un HTML SELECT se deslice (por ejemplo, debido a mouseover)? .

Por lo tanto, al less estoy haciendo el número 1, para que el usuario obtenga algunos comentarios en lugar de limitarse a Searching...

Si alguien puede decir cómo puedes hacer # 2 en Mobile Safari, estaría muy interesado en escuchar …