Options added to a <select> are invisible in the list box on iPhone
I have an HTML listbox and I'm adding options using javascript - no problems in any browsers on PC - Mozilla, Chrome, IE, Opera, Safari. However, when performed on iPhone the added option is invisible in the listbox -shows only - (0 items) until you tap on the listbox and then you see the added option as if you were tapping on a regular "select" item, tap on it and only after that the option is visible. I hope I made myself clear enough...
The functionality is as follows: user fills text in textbox (tb), clicks the add button (btn), the option is created and displayed in the listbox (lstbx)
Here's the code:
<input type="text" id="tb">
<select id="lstbx" multiple="multiple"></select>
<input type="button" id="btn" onclick="add_option(lstbx, form.tb, form.btn)">
function add_option(lstbx, tb, btn) {
var option = document.createElement("option");
if (tb.value != "") {
option.text = tb.value;
option.value = tb.value;
lstbx.options.add(option);
tb.value = "";}
}
I have successfully used the options array to do this. So instead of creating HTML nodes, use the JS API. Also be aware that multi select boxes are not supported on iOS.
var opt = new Option(tb.value, tb.value, false, false);
lstbx.options.add(opt);