?
Solved

use php to load html select options

Posted on 2010-09-16
3
Medium Priority
?
644 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1000 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 1000 total points
ID: 33689209
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

719 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