Solved

use php to load html select options

Posted on 2010-09-16
3
628 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 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

752 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