Solved

use php to load html select options

Posted on 2010-09-16
3
613 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:cgray1223
  • 2
3 Comments
 
LVL 22

Expert Comment

by:Ivo Stoykov
ID: 33689201
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
 
LVL 22

Accepted Solution

by:
Ivo Stoykov earned 250 total points
ID: 33689207
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
 
LVL 14

Assisted Solution

by:shobinsun
shobinsun earned 250 total points
ID: 33689209
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now