dynamically add element to select list?

Are you not just doing an AutoComplete?

http://jqueryui.com/autocomplete/

I think this looks more like related selects
@Andieje - can you post the query code from your page

Another candidate for knockoutjs.com.  you can create your own logic and set selects to arrays that when manipulated by script will automatically update the dom.  something to think about.

I am not trying to do a related select or an autocomplete. I would like to add a new item to the select list if the user tries to type it like on this example

http://www.usamimi.info/~sutara/ajax-combobox/

This is an example of what I mean only it is not finished and unsupported
http://jqueryui.com/autocomplete/#combobox

You say you are not trying to do an autocomplete and yet you post an example of an autocomplete...

I can't quite see what you are trying to achieve with the code you have posted - I get the idea of selecting a name from the dropdown and it being added to the unordered list below and this can be done easily enough with jQuery's .append

$("div.chosen-drop ul.chosen-results").append('<li class="active-result" data-option-array-index="" style="">New Name</li>')

Select allOpen in new window

remembering to increment the data-option-array-index but I don't get the need for the search box unless that is your autocomplete search input in which case you can dispose of that and correct the select element above to include the autocomplete function.

See the multiple value autocomplete sourcecode here: http://jqueryui.com/autocomplete/#multiple

I'm not trying to teach you to suck eggs (below) but I'm guessing that there is some confusion somewhere so a quick reminder :)

The dropdown values of an autocomplete are populated with existing values that match the search string i.e. the letters you are typing in. Any new value not found in the autocomplete dropdown will be saved on form submission and will be displayed next time the page/combo-box is loaded.

You can append a new value temporarily to the dropdown with but at which point are you telling the page that you have finished entering the new value and are now ready to append what you have written?

Being temporary, this newly appended value will be lost on reload or when the autocomplete fires again.

Is any of that helpful or can you offer some clarification of your requirement?

I have solved the issue myself using the theird party combo box
index.php

        <form>
      <input id="ac01_01" type="text">
      <input type="button" value="Check the value." onclick="displayResult('ac01_01')">
        </form>

Select allOpen in new window

ajax postback to post.pjp

<?php
//print_r($_POST);

$test_id = $_POST["testid"];
$new_name = $_POST["name"];

if ($test_id == "") {
	//echo "new item";
	//echo $new_name;
	//write to database 
	$con=mysqli_connect("localhost","test","test","test");
	// Check connection
	if (mysqli_connect_errno()) {
		echo "Failed to connect to MySQL: " . mysqli_connect_error();
	}

	mysqli_query($con,"INSERT INTO nation (name) VALUES ('$new_name')");
	mysqli_close($con);
	
}
else
{
	echo "Response : " . $test_id;
}
?>

Select allOpen in new window

Please dont be disgusted with the database code - i was just rushing

Thanks for your assistance. I am using the latter implementation in your last comment