Select de formulario define o codigo php a ser executado sem refrech com javascript

[SrTunes 1]

Bom dia amigos,

 

Estou com um dificuldade com um formulário html e preciso entender melhor o mecanismo do javascript. Podem me ajudar?

Seguinte:

 

Tenho em um formulário um campo de select com 3 opções:

<select id="seletor">
    <option>Maçã</option>
    <option>Laranja</option>
    <option>Banana</option>
</select>

Para cada opção que o usuário escolher deve ser executado um código php de pesquisa em banco de dados diferente para popular o próximo select no mesmo formulário com o código php seguinte:

<php 
    $consulta = mysql_query("SELECT `tipos` FROM maca;"); // query que busca os dados da tabela de maçãs
	while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer os resultados da consulta
?>
  ou
<php 
    $consulta = mysql_query("SELECT `tipos` FROM banana;"); // query que busca os dados da tabela de banana
	while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer os resultados da consulta
?>
  ou
 <php 
    $consulta = mysql_query("SELECT `tipos` FROM laranja;"); // query que busca os dados da tabela de laranja
	while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer os resultados da consulta
?>

Como faria isso com javascript?

 

 

Obrigado a todos.

[SrTunes 1]

Pessoal, consegui resolver uma parte do problema assim:

 

Peguei uma sugestão na internet de javascript assim:

$(document).ready(function(){
	$('#seletor').change(function(){
		$('#lista').load('teste_lista.php?seletor='+$('#seletor').val());
	});
});

Pelo que entendi essa função a cada mudança da seleção ela busca o "value" do option selecionado e envia via GET para a página "teste lista.php" que criei para executar a pesquisa e retornar um resultado dentro da <div> lista.

Ai o código ficou assim:

<script type="text/javascript">
	$(document).ready(function(){
		$('#seletor').change(function(){
			$('#lista').load('teste_lista.php?seletor='+$('#seletor').val());
		});
	});
</script>

<select id="seletor">
    <option value='Maca'>Maçã</option>
    <option value 'Laranja'>Laranja</option>
    <option valeu='banana'>Banana</option>
</select>

<div id="lista"></div>

Ai aconteceu outro problema:

Quando tento colocar nesta lista um nome composto que por exemplo tenha o value = ""fruta do conde" (com espaços), meu arquivo "teste lista.php" não recebe nada. Abaixo mostro como esta o arquivo php:

 

<?php

	require_once '../conexao.class.php';

    $con = new conexao(); // instancia classe de conxao
    $con->connect(); // abre conexao com o banco
	mysql_query("SET NAMES 'utf8'");
	
	$idseletor= $_GET['seletor'];
	
	if($idSeletor == 'Fruta do Conde'){
    	$consulta = mysql_query("SELECT `tipos` FROM fruta_do_conde;"); // query que busca os dados da tabela de fruta do conde
		while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer os resultados da consulta
        }
	if($idSeletor == 'Maçã'){
    	$consulta = mysql_query("SELECT `tipos` FROM maca;"); // query que busca os dados da tabela de maca
		while($campo = mysql_fetch_array($consulta)){ // laço de repetiçao que vai trazer os resultados da consulta
        }...
	...
	echo "<label for='tipos'>Tipos:</label>				
				<select name='tipos_frutas'>
					<option>Selecione a fruta:</option>";
	while($campo = mysql_fetch_array($consulta)){
		echo "<option>".$campo['tipos']."</option>";
	}
	echo "</select>"
          
?>

Minha questão é: Por que quando o "value" vem com espaço meu arquivo "teste lista.php" não recebe nada, pois quando não tem espeço ele recebe?

Sei que poderia colocar traço ao invés de espaço, mas gostaria de receber o valor com espaços.