force safari iOS select component to update when options change

Question

When you tap on a select input on a web page using iOS (iPhone), a spinner widget (the "picker") pops up and lets you spin through and select options within that select. Let's say you've tapped into one of these and the selector widget is open. While this is open, if you use javascript to modify the select options (add, remove, update options via the dom), then these changes don't get reflected in the widget unless the user closes and reopens the widget.

Is there a way to force the browser to update the options automatically?

enter image description here

Edit: Here is an example you can use to observe how updating select options doesn't update the selector widget: 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);
}

no, the IOS select works in the same modal-ish way that prompt() and confirm() do... — dandavis, Aug 28 '13 at 20:40

score 3 · Accepted Answer · answered Aug 29 '13 at 08:00

Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini.

So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible.

score 1 · Answer 2 · edited May 23 '17 at 12:00

I was brought to this question as the closest to my usage case, which is similar but not identical, and might apply to other people as it is a common situation. I found the answers here a touch confusing, so just wanted to clarify my findings.

I start with a dropdown containing just one option: Searching....
When the user clicks, the "picker" pops up (a "tick-list" on iPad, same principle as the "spinner" on iPhone), showing Searching....
An AJAX call gets come choices from the server, and JavaScript updates the options[] to these.
At this point, the picker still shows just Searching..., and the user has no clue that it has been repopulated. The user must click outside to dismiss the "picker", and click the dropdown again to see the new choices.

So in my case I do not have OP's situation of wanting a second dropdown to be displayed depending on what option is selected in the first dropdown. Rather I would like (#1) the "picker" disappear, and then (#2) reappear (with the new choices).

Now, it seems you can do #1, but not #2.

You can dismiss the "picker" by dropdown.blur() (tested in Mobile Safari). See Close a SELECT dropdown list programatically with Javascript/jQuery.
You cannot cause the "picker" to pop up again (at least not in Mobile Safari). See How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?.

So I am at least doing #1, so that the user gets some feedback rather than just being stuck with Searching....

If anyone can state how you can do #2 on Mobile Safari I would be very interested to hear....

score 0 · Answer 3 · answered Sep 19 '19 at 02:22

Worth trying: populate a second <select> element, and .focus() to it when the item in the first select list is chosen.

Note that iOS only allows a control to be focused within a user interactive events (touchend or click event) so I am guessing Safari Mobile might allow .focus() to work within a <select> (to opening the second select list).

Might not work, since an onchange event of a select list might not be deemed "interactive" or Safari Mobile might otherwise disallow selectElement.focus() to work for some reason.

Edit: I think this shows it is unlikely to work: force safari iOS select component to update when options change

Don't bother trying if you need to contact a server to fill the list. That is because when you get the response event, you are definitely not in a user interactive tap/click event handler, so .focus() is sure to be ignored (although there is a very slight chance an async chain could work).

score -1 · Answer 4 · answered Aug 23 '13 at 09:45

-1

Firstly, why would you want to - you should adjust the values in your HTML file, or with JavaScript as the page is loading.

However, if the values are changing as the user selects the dropdown, you can use JavaScript to select another element, then reselect the dropdown, causing it to reload.

You can bring focus to an element with the focus() method. Eg. Document.getElementById("input").focus();

answered Aug 23 '13 at 09:45

Braders

447
2
11

1

Unfortunately .focus() does not trigger the picker to open on iOS. The user would have to tap the select element again. – Rafe Aug 23 '13 at 13:12
As to why you would do this - think cascading ajax dropdowns. The content of the second dropdown gets loaded in dynamically once the user selects something from the first dropdown. I have a large data set, so it has to work this way. What's happening is that the user is hitting "next" to go to the second dropdown before the content is loaded from the server. When the content is finally ready to the load, then user already has the picker up which needs to have its values updated. – Rafe Aug 23 '13 at 13:15
@Rafe I don't know if this achievable or not, but it's defintely confusing to user experience. I'd recommend that you have the 2nd select disabled, when user select an option from the 1st list, display a loading label near the 2nd list, enable it when Ajax request is complete – evilReiko Aug 24 '13 at 11:48

force safari iOS select component to update when options change

4 Answers4