Pick item from select, it doesn't add to listbox. Click select again, item gets added to listbox.

[njdubois]

Pretty similar to this issue:

 

http://stackoverflow.com/questions/14834779/chrome-browser-adding-options-to-a-select-box-doesnt-show-in-dropdownlist

 

Only happening on the latest version of Chrome on a Mac, Chrome on windows is ok, all other browsers are ok.

 

I had 2 functions.  One that used ajax to send the new item to a php script to add to a session variable.  Then a second ajax function to a php file that builds the select html from the session variable and returns the select html.  There is an in-between function that just insures that I don't add the "please select..." text after an item has been added and it resets the drop down select.

 

Then I tried the jacascript approach and added the new option for javascript.  Same thing.

 

I have a select filled with options.  When an option is selected it is supposed to be added to a select list box below it.  This item is not added until they click the select drop down box a second time.

 

The dropdown select code:

<select name="Notepad" id="Notepad" onclick="test_for_change(this.value);" style="min-width:275px;">
	<option>select training item...</option>
	<option title="option 1" value="option 1">option 1</option>
	<option title="option 2" value="option 2">option 2</option>
	<option title="option 3" value="option 3">option 3</option>
</select>

The javascript:

function test_for_change(str) {
	if(str!="select training item...") {
		add_training_item(str)
	}
}

// This is just used for at time of load.
var temp_notepad='<?php echo $_SESSION['cur_training_str']; ?>';

function add_training_item(new_item) {
	var xmlhttp;

	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	}
	else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {

			temp_notepad=xmlhttp.responseText;
			document.getElementById("Notepad").value="select training item...";
			
			// Un-rem this out and it calls the php script to return the select html code.
			//refresh_Used_Training_Items();
			
			// or I un-rem the code below and it does it with pure javascript.
			
		}
	}
	
	// This line of code does the pure javascript.
	//document.getElementById("used_training").options[document.getElementById("used_training").options.length] = new Option(new_item);
	
	var subs="?i="+new_item;

	xmlhttp.open("POST","ajax/add_used_training_item.php"+subs,true);
	xmlhttp.send();
}

function refresh_Used_Training_Items() {

	// This function calls a php script that builds the html for the select.
	var xmlhttp;

	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	}
	else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("div_used_training_items").innerHTML=xmlhttp.responseText;
		}
	}

	xmlhttp.open("POST","ajax/create_used_training_list.php",true);
	xmlhttp.send();
}

Neither the ajax call to the php script that returns the select, or the pure javascript add option work.  This is for Chrome running on a Mac.  Chrome is fully up to date.  Works fine in every other browser.  The problem is that when they select an item from the drop down it doesn't immediately show in the listbox select. When they click the drop down again (not even selecting anything) the listbox select updates/refreshes to show the recently added item.

 

Thanks for reading all of this, I am going to recommend that the person use safari or firefox for the time being. At least until and IF I figure out a solution.

 

Nick