(Resolvido) Combo dinamico

Ayesha Lomaski · Abril 15, 2010

Olá,

Em primeiro lugar: eu não sei nada de java script então me perdoem se for uma duvida idiota

Quero faezr um combo dox dinâmico, encontrei varios posts em varios sites porem não consigo editar nenhum deles com sucesso.

O combo seria para dois selects um de categoriase outro de subcategorias

Tenho uma tabela para as categorias e outra para subcategorias no meu banco de dados

Quero que quando for selecionada uma categoria seja exibido as subcategorias cadastradas nela.

É parecido com a seleção de cidade e estado que se vê purai mas não consegui editar nenhum codigo q funcionasse com as categorias e sub categorias

a tabela de categorias tem os campos: idcat e categoria (nessa ordem)

a tabela de subcategorias tem os campos: idsubcat, subcat, idcat (nessa ordem)

alguém tem um codigo simples de entender que eu possa fazer funcionar nessas condições?

fercosmig · Abril 15, 2010

posta seu código ae

e mostra onde está apresentando erro

tem exemplos de utilização de ajax no repositório de scripts

http://scriptbrasil.com.br/forum/index.php?showtopic=82408

Ayesha Lomaski · Abril 19, 2010

meu código:

<?
include('../conectdb.php');
include('result.php');
if ($idu == ""){ header('location:login.php'); }
$doc = mysql_query("select cnpj from userpj where iduser='$idu' and nome='$user'");
if (mysql_num_rows($doc) == 0){ $doc = mysql_query("select cpf from userpf where iduser='$idu' and nome='$user'");}
if (!$doc){ print mysql_errno()." - ".mysql_error();}
?>
<!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=ISO-8859-1" />
<title>CanalComercio.com.br</title>
<link rel="stylesheet" type="text/css" href="../adm/menu_style.css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'pt-BR'});
  google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('010574668048739066181:a_0slcp_iwa');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

function exibeModeloSelect(id_marca) {
    $.ajax({
        type: "POST",
        url: "result.php",
        data: "acao=exibeModeloSelect&id_marca=" + id_marca,
        beforeSend: function() {
            // enquanto a fun��o esta sendo processada, voc�
            // pode exibir na tela uma
            // msg de carregando
        },
        success: function(txt) {
            // pego o id da div que envolve o select com
            // name="id_modelo" e a substituiu
            // com o texto enviado pelo php, que � um novo
            //select com dados da marca x
    
            /**
             OSDENI
             AQUI TEM QUE SER O ID DO ELEMENTO QUE VAI RECEBER O NOVO SELECT
             www.jquery.com, uma lida na documentação aqui ajudará você entender o que esse método html() faz, 
             ele é simples, na documentação ta bem explicado
             Exemplo: $('#aqui_quero_abrir_modelos').html(txt);
            */
            $('#subcateg').html(txt);
        },
        error: function(txt) {
            // em caso de erro voc� pode dar um alert('erro');
        }
    });
}

</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 
<link href="../estilo.css" type="text/css" rel="stylesheet"/>

</head>

<body><div id='tudo'>
 <? include('../logo.php');?>
 <? include('../adm/menu.php'); ?>
 <div id='cadnot'><h3>Cadastro de Not&iacute;cias</h3>
 <form method="post" name='cadastro' enctype="multipart/form-data" action="inclnot.php?doc=<? print mysql_result($doc,0,0);  ?>">
     <fieldset class="char">T&iacute;tulo: </fieldset><fieldset class="val"><input type="text" name="titulo" size="20" maxlength="50" /></fieldset>
    <fieldset class="char">Texto: </fieldset><fieldset class="val"><textarea cols="30" rows='10' name='texto'></textarea></fieldset>
    <fieldset class="char">Autor: </fieldset><fieldset class="val"><input type="text" name='autor' size="20" maxlength="50"/></fieldset>
    <fieldset class="char">Imagem: </fieldset><fieldset class="val"><input type="file" name="arquivo" /></fieldset>
    <fieldset class="char">Categoria: </fieldset><fieldset class="val">
        <select name='categoria' id="cat" onchange="exibeModeloSelect(this.value);">
        <option value='0'></option>

<?php foreach(get_marcas() as $marca) { ?>
<option value="<?php echo $marca['idcat']; ?>">
<?php echo $marca['categoria']; ?>
</option>
<?php } ?>
        </select></fieldset>
        <fieldset class="char"><label for="scat">Sub-Categoria:</label></fieldset><fieldset class="val">
                
                <?php 
                    /**
                     * OSDENI
                     * Aqui ao redor desse select, você deve colocar um Elemento HTML que irá substituir esse select pelo novo
                     * ex: <div id="aqui_quero_abrir_modelos"><select></select></div>
                     */
                ?>
                <div id='subcateg'><select name="subcategoria"></select></div>
</fieldset>
    <fieldset class="bott" style="border:0"><input type="submit" value="Incluir" /><input type="reset" value="Limpar" /></fieldset>
 </form>
 </div>
 <br class="clearfloat" /></div>
</body>
</html>

o resul.php:

<?php
      $cate = mysql_query('select * from categorias');
      // Para solicionar problema de ACENTOS
      header('Content-Type: text/html; charset=ISO-8859-1');
      function get_marcas() {
      // Aqui criamos um array bidimensional, que poderá vi do banco de
      // dados da mesma forma
      // basta você fazer um select * from tabela_marca -> a tabela_marca
      // deve conter: id_marca, ds_marca
      $marcas = mysql_fetch_array($cate);
      return $marcas;
      }
      function get_modelos($id_marca) {
          $scat=mysql_query("select * from subcateg where idcat=$id_marca");
      // Ao invés de buscar num array (é como estou fazendo aqui), você
      // pode da um select na tabela
      // do banco de dados que armazena o modelo, e retorna todos os
      //modelos da marca $id_marca
      // select * from tabela_modelo where id_marca = $id_marca -> a
      // abela_modelo deve conter: id_marca, id_modelo, ds_modelo
      // depois do select você retorna os dados do banco na função
      $tabela_modelo = mysql_fetch_array($scat);
      $modelo = array();
      $cont = 0;
      for($i=0; $i < count($tabela_modelo); $i++) {
      if($tabela_modelo[$i]['idcat'] == $id_marca) {
      $modelo[$cont]['idcat']= $tabela_modelo[$i]['idcat'];
      $modelo[$cont]['subcat'] = $tabela_modelo[$i]['subcat'];
      $cont++;
      }
      }
      return $modelo;
      }
      switch ($_POST['acao']) {
      case "exibeModeloSelect":
      $txt = '<select name="id_modelo">';
      $txt .= '<option value="">Selecione o Modelo</option>';
      foreach(get_modelos($_POST['id_marca']) as $modelo) {
      $txt .= '<option value="'.$modelo['idsubcat'].'">' . $modelo['subcat'] . '</option>';
      }
      $txt .= "</select>";
      echo $txt;
      break;
      }
      ?>

Ayesha Lomaski · Abril 20, 2010

ninguém pode me ajudar? nem com outro codigo? presciso entregar esse site até dia 30 e só falta essa parte pra terminar!

*FIT* · Abril 20, 2010

Olá, bom dia! eu aprendi fazer isso com esse script aqui, é bem simples e muita fácil, hoje eu uso isso quase sempre.

da uma lida

http://www.revistaphp.com.br/artigo.php?id=22

ta praticamente pronto, só vai precisar alterar as consultas na base.

Editado Abril 20, 2010 por *FIT*

Ayesha Lomaski · Abril 20, 2010

Olá, bom dia! eu aprendi fazer isso com esse script aqui, é bem simples e muita fácil, hoje eu uso isso quase sempre.
da uma lida
http://www.revistaphp.com.br/artigo.php?id=22
ta praticamente pronto, só vai precisar alterar as consultas na base.

tentei esse script antes mas não funcionou :(

Ayesha Lomaski · Abril 20, 2010

Ae consegui graças a ajuda do *FIT* no MSN :)

os codigos ficaram assim:

cadnot.php

<?
include('../conectdb.php');
//include('result.php');
//if ($idu == ""){ header('location:login.php'); }
$doc = mysql_query("select cnpj from userpj where iduser='$idu' and nome='$user'");
if (mysql_num_rows($doc) == 0){ $doc = mysql_query("select cpf from userpf where iduser='$idu' and nome='$user'");}
?>
<!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=ISO-8859-1" />
<title>CanalComercio.com.br</title>
<link rel="stylesheet" type="text/css" href="../adm/menu_style.css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
    google.load('search', '1', {language : 'pt-BR'});
    google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('010574668048739066181:a_0slcp_iwa');
    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>

<script language="javascript" type="text/javascript">
function getXMLHTTP() { 
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
    }
function getSubCategoria(CategoriaId) {
var strURL="result.php?categoria="+CategoriaId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('Subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}

</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 
<link href="../estilo.css" type="text/css" rel="stylesheet"/>

</head>

<body><div id='tudo'>
 <? include('../logo.php');?>
 <? include('../adm/menu.php'); ?>
 <div id='cadnot'><h3>Cadastro de Not&iacute;cias</h3>
 <form method="post" name='cadastro' enctype="multipart/form-data" action="inclnot.php?doc=<? print mysql_result($doc,0,0);  ?>">
     <fieldset class="char">T&iacute;tulo: </fieldset><fieldset class="val"><input type="text" name="titulo" size="20" maxlength="50" /></fieldset>
    <fieldset class="char">Texto: </fieldset><fieldset class="val"><textarea cols="30" rows='10' name='texto'></textarea></fieldset>
    <fieldset class="char">Autor: </fieldset><fieldset class="val"><input type="text" name='autor' size="20" maxlength="50"/></fieldset>
    <fieldset class="char">Imagem: </fieldset><fieldset class="val"><input type="file" name="arquivo" /></fieldset>
<?

echo "
<fieldset class=\"char\">
Categoria: </fieldset><fieldset class=\"val\"><select name=\"categoria\" onChange=\"getSubCategoria(this.value)\">
<option value=\"\">Escolha a Categoria</option>";
$Cat = mysql_query("SELECT * FROM categorias ORDER BY categoria ASC");
$rows = mysql_num_rows($Cat);
for($x=0;$x<$rows;$x++){
$resCat = mysql_fetch_object($Cat);
echo"<option value=\"".$resCat->idcat."\">".$resCat->categoria."</option>";
}
echo"</select>
</fieldset>
<fieldset id=\"Subdiv\" class='char'>SubCategoria:
</fieldset>";
?>

    <fieldset class="bott" style="border:0"><input type="submit" value="Incluir" /><input type="reset" value="Limpar" /></fieldset>
 </form>
 </div>
 <br class="clearfloat" /></div>
</body>
</html>

e o result.php

<? 
include('../conectdb.php');

$categoria = $_GET["categoria"];

echo "<fieldset id=\"Subdiv\" class='char' style=\"witdh:90%\">SubCategoria: <select name=\"subCategoria\" id=\"subCategoria\">";
echo"<option value=\"0\">Escolha a SubCategoria</option>";
$busca = mysql_query("SELECT * FROM subcateg WHERE idcat='$categoria'");
while($sub=mysql_fetch_assoc($busca))
{
echo "<option value=\"$sub[idsubcat]\">$sub[subcat]
</option>";
}
echo "</select></fieldset>";
?>

muito obrigada!

Entrar

(Resolvido) Combo dinamico

Pergunta

Ayesha Lomaski

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

Ayesha Lomaski

Link para o comentário

Compartilhar em outros sites

Ayesha Lomaski

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Ayesha Lomaski

Link para o comentário

Compartilhar em outros sites

Ayesha Lomaski

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades