adding multple chained selects.

patchido · March 7, 2013

So i managed to create my chained selects from my database.

now i need to ba able to increment the amount of inputs in my form, i can think on how to do this, but i just can't imagine how my code will still be working with the chained selects, and how will i manage to manipulate the selects at the end.

here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
				$("select#localidad").attr("disabled","disabled");
				$("select#user").attr("disabled","disabled");
				$("select#region").change(function(){
					$("select#localidad").attr("disabled","disabled");
					$("select#user").attr("disabled","disabled");
					$("select#localidad").html("<option>Cargando...</option>");
					var id = $("select#region option:selected").attr('value');    
					
					$.post("includes/select_localidad.php", {id:id}, function(data){        
						$("select#localidad").removeAttr("disabled");
						$("select#localidad").html(data);        
					});    
				});
				$("select#localidad").change(function(){
					$("select#user").attr("disabled","disabled");
					$("select#user").html("<option>Cargando...</option>");
					var id = $("select#localidad option:selected").attr('value');    
					
					$.post("includes/select_user.php", {id:id}, function(data){        
						$("select#user").removeAttr("disabled");
						$("select#user").html(data);        
					});    
				});
				
				
				$("form#select_form").submit(function(){            
					var reg = $("select#region option:selected").attr('value');            
					var loc = $("select#localidad option:selected").attr('value');   
					var usr = $("select#user option:selected").attr('value');         
					if(reg>0 && loc>0 && usr>0)            
					{                
						var result = $("select#user option:selected").html();                
						$("#result").html('your choice: '+result);            
					}            
					else            
					{                
						$("#result").html("you must choose three options!");            
					}            
					return false;        
				});
				
				
				 
            });
        </script>
    </head>
    <body>
    <?php include "includes/registro.class.php"; ?>
    
        <form id="select_form">
            Region:<br />
            <select id="region">
 				<?php echo $opt->ShowRegion(); ?>
            </select>
            <br /><br />
 
           Localidad:<br />
            <select id="localidad">
                <option value="0">Selecciona...</option>
            </select>
            <br /><br />
            
            Remitente:<br />
            <select id="user">
            	<option value="0">Selecciona...</option>
            </select>
            <br /><br />
            
            <input type="submit" value="Registrar" />
        </form>
        <div id="result"></div>
    </body>
</html>

here is the class if needed.

<?php
class SelectList
{    
	protected $conn;         
		public function __construct()
		{            
			$this->DbConnect();        
		}         
		
		protected function DbConnect()
		{
			include "db_config.php";
			$this->conn = mysql_connect($host,$user,$password) OR die("Unable to connect to the database");
			mysql_select_db($db,$this->conn) OR die("can not select the database $db");            
			return TRUE;        
		}       
		
		public function ShowRegion()        
		{            
			$sql = "SELECT * FROM region";            
			$res = mysql_query($sql,$this->conn);            
			$category = '<option value="0">Selecciona...</option>';            
			while($row = mysql_fetch_array($res))            
			{                
				$category .= '<option value="' . $row['id'] . '">' . $row['region'] . '</option>';
			}            
			return $category;        
			}         
			
		public function ShowLocalidad()        
		{            
			$sql = "SELECT * FROM localidad WHERE region_id=$_POST[id]";
			$res = mysql_query($sql,$this->conn);            
			$type = '<option value="0">Selecciona...</option>';            
			while($row = mysql_fetch_array($res))            
			{               
				$type .= '<option value="' . $row['id'] . '">' . $row['localidad'] . '</option>';            
			}            
			return $type;       
		}
		public function ShowUser()        
		{            
			$sql = "SELECT * FROM usuarios WHERE localidad_id=$_POST[id] ORDER by ap_Paterno ASC";
			$res = mysql_query($sql,$this->conn);            
			$type = '<option value="0">Selecciona...</option>';            
			while($row = mysql_fetch_array($res))            
			{               
				$type .= '<option value="' . $row['id'] . '">' . $row['ap_Paterno'] . " " . $row['ap_Materno'] . ", " . $row['nombre'] . "(" . $row['mail'] . ")" . '</option>';            
			}            
			return $type;       
		}
} 
		
$opt = new SelectList();
?>

thanks

patchido · March 7, 2013

so i added up this.. so i can add and remove selects, but now i wont be able to load the chained values, i need to carry the click event somehow so i know which select to update, but i am not sure how.

this is the code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php include "includes/registro.class.php"; ?>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#localidad").attr("disabled","disabled");
$("select#user").attr("disabled","disabled");
$("select#region").change(function(){
$("select#localidad").attr("disabled","disabled");
$("select#user").attr("disabled","disabled");
$("select#localidad").html("<option>Cargando...</option>");
var id = $("select#region option:selected").attr('value');

$.post("includes/select_localidad.php", {id:id}, function(data){
$("select#localidad").removeAttr("disabled");
$("select#localidad").html(data);
});
});
$("select#localidad").change(function(){
$("select#user").attr("disabled","disabled");
$("select#user").html("<option>Cargando...</option>");
var id = $("select#localidad option:selected").attr('value');

$.post("includes/select_user.php", {id:id}, function(data){
$("select#user").removeAttr("disabled");
$("select#user").html(data);
});
});


$("form#select_form").submit(function(){
var reg = $("select#region option:selected").attr('value');
var loc = $("select#localidad option:selected").attr('value');
var usr = $("select#user option:selected").attr('value');
if(reg>0 && loc>0 && usr>0)
{
var result = $("select#user option:selected").html();
$("#result").html('your choice: '+result);
}
else
{
$("#result").html("you must choose three options!");
}
return false;
});

var counter = 2;

$("#addButton").click(function () {

if(counter>20){
alert("maximo de 20 registros");
return false;
}

var newSelectDiv = $(document.createElement('div'))
.attr("id", counter);

newSelectDiv.after().html('Region:<br />' +
'<select id="region">' +
"<?php echo $opt->ShowRegion(); ?>" + '</select><br /><br /> Localidad:<br />' +
'<select id="localidad">' +
'<option value="0">Seleciona...</option>' + '</select><br /><br /> Remitente:<br />' +
'<select id="user">' +
'<option value="0">Seleciona...</option>' + '</select><br /><br />');

newSelectDiv.appendTo("#select");


counter++;
});

$("#removeButton").click(function () {
if(counter==2){
alert("No more textbox to remove");
return false;
}

counter--;

$("#select" + counter).remove();

});


});

</script>
</head>
<body>

<form id="select_form">
<div id="selectGroups">
<div id="select">
<div id="1">

Region:<br />
<select id="region">
<?php echo $opt->ShowRegion(); ?>
</select>
<br /><br />

Localidad:<br />
<select id="localidad">
<option value="0">Selecciona...</option>
</select>
<br /><br />

Remitente:<br />
<select id="user">
<option value="0">Selecciona...</option>
</select>
<br /><br />
</div>
</div>
</div>


<input type="submit" value="Registrar" />
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>

</form>
<div id="result"></div>
</body>
</html>

Edited March 7, 2013 by patchido

Adam · March 7, 2013

What do you mean by "increment the number of variables in my form" ?

patchido · March 7, 2013

instead of having 1 set of chained selects i can add more sets

so when i submit i sumbited the info of multiple sets of chained selects, i dont know if i am being clear.

this is for a packaging system, like a FEDEX or UPS.

so with the chained selects you get where and to whom you are sending, i want to be able to increment the number of packages to register.

Adam · March 7, 2013

Ah, I see what you mean. Well for one don't access the corresponding elements via ID, given IDs are unique. I would give them a class and find them relative to a parent element wrapping them. For example:

<div class="wrapper">

    <select class="a"></select>

    <select class="b"></select>

</div>


<div class="wrapper">

    <select class="a"></select>

    <select class="b"></select>

</div>


<script>


    $('select.a').change(function() {

        // Select .b relative to the current .wrapper parent

        $(this).parent('.wrapper').find('select.b');

    });


</script>

Does that make sense?

patchido · March 7, 2013

yes, that is exaclty what i needed, ill modify my code, see if i can get it to work.

Thanks!

Adam · March 7, 2013

No worries. You may need to use .parents() instead of .parent(), if the wrapper element you're trying to select is not the direct parent.

patchido · March 8, 2013

I guess i will be manipulating the result with something like the nth-child() am i correct?

Another thing, what exactly is ajax? Is is something inside jquery? Inside javascript? Totally apart? I know i used it but im not sure what it is

Adam · March 8, 2013

Hmm I don't see any need for nth-child? How are you thinking of using it?

Put simply, AJAX allows you to script requests to the server in the background without reloading the page. Back in the day this was invented for requesting XML, which is where the name comes from, but these days it's quite often JSON or simply HTML that's returned instead.

The request is made with JavaScript using the 'XMLHttpRequest' API, however it's not particularly user-friendly and there's a few cross-browser quirks you have to cater for. JavaScript libraries like jQuery wrap XMLHttpRequest and provide a much nicer API, and take care of all the cross-browser crap for you. Underneath it's all the same though.

patchido · March 8, 2013

so, i tried what you said, here is my code, the second select won't load, can you spot qhy??

thanks!

$('select.region').change(function(){
					$(this).parent('.select').find('select.localidad').attr("disabled","disabled");
					$(this).parent('.select').find('select.user').attr("disabled","disabled");
					$(this).parent('.select').find('select.localidad').html("<option>Cargando...</option>");
					var id = $(this).parent('.select').find('select.region option:selected').attr('value');    
					
					$.post("includes/select_localidad.php", {id:id}, function(data){        
						$(this).parent('.select').find('select.localidad').removeAttr("disabled");
						$(this).parent('.select').find('select.localidad').html(data);        
					});    
				});

Adam · March 9, 2013

Can you show the HTML you're using that with?

Sign In

adding multple chained selects.

Recommended Posts

patchido

Link to comment

Share on other sites

patchido

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

patchido

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

patchido

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

patchido

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

patchido

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information