Jump to content

populate dropdown based on a select menu


TeddyKiller

Recommended Posts

We have a select menu, which is populated by a PHP Mysql query.

What I want to do.. is populate the drop down menu.. based on what is clicked in the select menu.

It sort of.. gets the value of whats clicked.. and insert it into a mysql query.. and then populate the drop down menu.

 

Any help? I know most of it would be in PHP. Although... the bit would be.. getting the value.. and then allowing me to do stuff with it to populate the drop down.

Link to comment
Share on other sites

Yeah. I found one.. well I used one on a previous site with two drop downs, i forgot about it.. and then I remembered. It seems to do the job. - I didn't know a drop down is actually a select menu with a different size otherwise I wouldn't of posted this. :P

 

Thanks for replying though

Link to comment
Share on other sites

Actually, there is a problem.

I can't save the fields. Like.. they get generated on the page, but for some reason they aren't in the source code when I view it. So when I process the form, the drop down is like.. empty. It has no value..

Any reason for this?

Link to comment
Share on other sites

Bingo. Found something nice.

<?php 
define("_VALID_PHP", true); 

include('../include/config.php');
include('func.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chained Select Boxes using PHP, MySQL and jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
	$('#wait_1').show();
	$.get("func.php", {
		func: "drop_1",
		drop_var: $('#drop_1').val()
	}, function(response) {
		setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
	});
	return false;
});
});

function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).show();
}
</script>
</head>

<body>
<p>
<form action="" method="post">
    <select name="drop_1" id="drop_1" size="7">
    
      <option value="" selected="selected" disabled="disabled">Select a Category</option>
      
      <?php getTierOne(); ?>
    
    </select> 
    
    <br  /><br />
    
    <span id="testing">
    	<select name="test">
        	<option value="" selected="selected" disabled="disabled">Choose one</option>
            <?php 
			$editranks = $db->query ("SELECT * from clan_ranks WHERE clanurl = 'url' order by `rankname` asc");
			while($res = $db->fetch($editranks)){
				echo '<option value="' . $res['rankname'] . '">' . $res['rankname'] . '</option>';
			}
		?>
        </select>
        <span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
    </span>
    
    <span id="result_1" style="display: none;"></span>
    
    <br /><br />
    
    <?php echo '<input type="submit" name="submit" value="Submit" />'; ?>
  
</form>
</p>
</body>
</html>

 

func.php holds the functions for it all etc. The problem is, when you select the first value.. it works fine, the loading bar displays, then disappears. Although when you click another value, it doesn't display the loading bar. Other than that it works, just wondering if you can help out with that? I believe its something with the ajax.

Link to comment
Share on other sites

I think instead of

selected="selected" disabled="disabled"

you should use

  <option value="" selected disabled>Select a Category</option>

 

Even though you access these properties in javascript using an equals (=), you don't use one when defining the HTML.  Otherwise, it is probably something other than what is posted here.  Look into getTierOne() and possibly just dump the ajax as text rather than using the javascript.  (a javascript alert works nice, but you can't copy and paste it).

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.