use php to load html select options

Hello,

I have the below php and html code that works together to build a select control with it's options based on the results from a database query.  The problem I'm facing is that I need to refresh this list without reloading the page.  Currently the php script and the html code is all in one file.  What I want to do is externalize the php script and perform a GET request from javascript to get the list again.  How would I assign the options from the php script (via a GET request) for the select control?

The main reason for this is that within my application I'm removing some options based on some user actions.  I have a need to refresh those options from a javascript function.  Any other ideas?  
<?php
	$con = mysql_connect('localhost', 'user', 'pwd');
	$show_dialog='display:none;';
	if (!$con){
	  die('Could not connect: ' . mysql_error());
	}
	mysql_select_db("db conn string", $con);
	$sql="SELECT * FROM ALBUM_NEW"; 
	$result=mysql_query($sql); 
	$options=""; 
	while ($row=mysql_fetch_array($result)) { 
		$id=$row["ID"]; 
		$title=$row["TITLE"]; 
		$options.="<OPTION VALUE=\"$id\">".$title; 
	} 	
	mysql_close($con);
	echo $options;
?>

<SELECT name="selectAlbum" id="selectAlbum"> 
	<OPTION VALUE="0">-- Choose to Move --</option>
		<?=$options?> 
	</SELECT>

Open in new window

cgray1223Asked:
Who is Participating?
 
Ivo StoykovConnect With a Mentor Commented:
here is a full example of add/remove options. Hope it is clear enough.

HTH

Ivo Stoykov

<html>
<body>
<script language="JavaScript">
    function function1() {
        var newOption = document.createElement('<option value="TOYOTA">');
        document.all.mySelect.options.add(newOption);
        newOption.innerText = "Toyota";
    }
    function function2() {
        document.all.mySelect.options.remove(0);
    }
</script>
<select id="mySelect">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<input type="button" value="Add" onclick="function1();">
<input type="button" value="Remove" onclick="function2();">
</body>
</html>

Open in new window

0
 
Ivo StoykovCommented:
Please check the snippets below.

HTH

Ivo Stoykov

var select = document.getElementById("example-select");
select.options[select.options.length] = new Option('Text 1', 'Value1');

or for bunch of data (lets say data is cumming from the server)

var example_array = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};

var select = document.getElementById("example-select");
for(index in example_array) {
    select.options[select.options.length] = new Option(example_array[index], index);
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.