Chrome Browser: Adding Options to a Select Box doesn't show in dropdownlist

Question

When a user clicks on a selectbox, an Ajax even occurs.

This event places options in to the select box.

After the options are placed in to the select box the user should be able to click on them.

In Chrome, when you click the drop down list appears "Select One" but after the options are added, the list still is "Select One" the user can hit the down arrow key and select it, but it is not shown in the "drop down list of options" after they are added.

What magical piece of JS or jQuery would refresh this drop down list being displayed without a second click in chrome?

When the option is clicked this is being executed via JS:

secBox = document.getElementById('sel34541_75');
secBox.length = 1;
addOption(secBox, "Option 1", "execPopDrop('sel34541_75', 34541, 'Option 1', 'type1', 'page.php')");
addOption(secBox, "Option 2", "execPopDrop('sel34541_75', 34541, 'Option 2', 'type2', 'page.php')");
addOption(secBox, "Option 3", "execPopDrop('sel34541_75', 34541, 'Option 3', 'type3', 'page.php')");
addOption(secBox, "Option 4", "execPopDrop('sel34541_75', 34541, 'Option 4', 'type4', 'page.php')");

Add option function looks like this:

function addOption(selectbox, text, value) {
  selectbox.options[selectbox.options.length]=new Option(text,value);
}

If i click and then hit the down arrow, I see the dynamic options are there, but not in the list visible. (again this works in IE and FF)

If I click it a second time I see the correct options in the drop down

Answer 1

Try this - works in all browsers - if you need support for IE4, then you need to add 1 to the options.length before adding the option ;)

update this solution is to the original question

function addOption(selectbox, text, value) {
  selectbox.options[selectbox.options.length]=new Option(text,value);
}

However WHY add that horrible string to the option?

Looks like you would (shudder) EVAL the string in the value

Why not

addOption(secBox, "Option 1", "sel34541_75");

and then in execPopDrop pass the select, then it would be

function execPopDrop(sel) {
  var val = sel[sel.selectedIndex].value;
  var txt = sel[sel.selectedIndex].text;
  var type="type"+val.split(" ")[1]; // from Option 1
  var parm2 = val.replace(/[sel_]/g,""); // 34541
  // here you have all the stuff you need to do whatever you did before
}