Categories > TinyButStrong general >

2 selects dependents (combo) Javascript

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: Ignacio
Date: 2005-03-30
Time: 22:06

2 selects dependents (combo) Javascript

<form name="form1" id="form1" method="post" onSubmit="return comprobar();" action="[var.accion2]">
    <table class="tabla_principal" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td valign="top"><p><strong>Pa&iacute;s</strong></p>
        </td>
        <td><select class="input" name="id_pais"  id="id_pais" size="1" onChange="redirect(this.options.selectedIndex)">
          <option value="[pais.id]">[pais.pais;block=option]</option>
          <option value="nada">[var.pais.seleccionado;selected]</option>
        </select></td>
      </tr>
      <tr>
        <td valign="top"><p><strong>Provincia:</strong></p>
        </td>
        <td>
        <select class="input" name="id_provincia"  id="id_provincia" size="1">
             <option value="[provincia.id]">[provincia.provincia;block=option]</option>
              <option value="nada">[var.provincia.seleccionado;selected]</option>
        </select>
        <SCRIPT> <!--
var groups=document.form1.id_pais.options.length
var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()

    <?php
    $tabla3 = $dbPref."secciones";
    $consulta3 = mysql_query( "SELECT * FROM $tabla3 ORDER BY `prioridad` ASC " )  or error( mysql_error() );
        $g1 = 0;
        while ($renglon3 = mysql_fetch_array( $consulta3 ))
        {
            $tabla4 = $dbPref."categorias";
            $auxiliar1 = $renglon3[idseccion];
            $consulta4 = mysql_query( "SELECT * FROM $tabla4 WHERE idseccion = '$auxiliar1' ORDER BY `nombre_es` ASC " )  or error( mysql_error() );
            $d1 = 0;
            while ($renglon4 = mysql_fetch_array( $consulta4 ))
                {
                echo "group[".$g1."][".$d1."]=new Option(\"".$renglon4[nombre_es]."\",\"".$renglon4[idcategoria]."\")\n";
                $d1 = $d1 + 1;
                }
            echo "\n";
            $g1 = $g1 + 1;
      }
?>

var temp=document.form1.id_provincia

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

//--> </SCRIPT>
        </td>
      </tr>
      <tr>
        <td width="20%" valign="top"><p><strong>Poblacion:</strong></p></td>
        <td width="80%">[form.ciudad; htmlconv=no]</td>
      </tr>
      <tr>
        <td width="20%">&nbsp;</td>
        <td width="80%"><input class="boton" type="submit" value="[var.accion]"> <input class="boton" type="reset" value="Reset"> <input class="boton" type="button" value="Volver" onClick="history.go(-1)"></td>
      </tr>
    </table>
</form>

how i do this! my from is argentina! bye!
By: Skrol29
Date: 2005-03-31
Time: 17:07

Re: 2 selects dependents (combo) Javascript

Hi Ignacio,

Your two select dependents can be done by two ways.
First one is to use sub-blocks just like in the inline examples.
This is the closer way from what you coded.

But is seems to me that you can simplify your code using only one query with joinned tables.
Your PHP can be something like this:
$TBS->MergeBlock('group','mysql',"SELECT c.nombre_es, c.idcategoria FROM $tabla3 AS s INNER JOIN $tabla4 AS c ON (s.idseccion=c.idseccion) ORDER BY s.prioridad, c.nombre_es");

And you HTML side:
<script>
...
[grp;block=begin]
group[[grp.gl]][[grp.dl]]=new Option("[grp.nombre_es]","[grp.idcategoria]");
[grp;block=end]
...
</script>

It won't work as is, because fields "gl" and "dl" are not defined.
They cannot be provided by the query, so you have calculate them using    a user function and parameter 'onsection', or to change you indexation if it's possible.
By: Ignacio
Date: 2005-03-31
Time: 18:17

Re: 2 selects dependents (combo) Javascript

I do not understand much on this, you can show an example to me working on this subject?  I pass some tools to you:

http://www.programacionweb.net/articulos/articulo/?num=269

http://www.desarrolloweb.com/articulos/1281.php
By: Ignacio
Date: 2005-03-31
Time: 19:49

Re: 2 selects dependents (combo) Javascript

http://www.experts-exchange.com/Web/Web_Languages/PHP/PHP_Databases/Q_20936250.html
By: Skrol29
Date: 2005-04-01
Time: 14:30

Re: 2 selects dependents (combo) Javascript

Hi Ignacio,

I can give a solution for that problem explain on experts-exchange.com, because the two other links are not in english and I can't understand them.

First you have to decide if the refine of sub-list are done by javascript (without refreshing the entire page), or by php (refreshing the entire page).

If you do it by PHP, then it is simple for the merge, but you'll probably have to recall all other entries of the form. If you refine by Javascript, then it doesn't need to refresh the entire page, but the page needs to have all data of the tree tables in Javascript. That's perhaps a lot of data. And you have to code a specific script function to clear-and-feed the list.

Here is an example with refine using PHP:

HTML side:
Callcenter:
<select name="lst_callcenter">
  <option value="[cc.id;block=option]" selected>[cc.name]</option>
</select>

Suprevisor:
<select name="lst_supervisor">
  <option value="[sup.id;block=option]" selected>[sup.name]</option>
</select>

Reps:
<select name="lst_reps">
  <option value="[rep.id;block=option]" selected>[rep.name]</option>
</select>



PHP side:
// Build variables from selected items
$cc_id = (isset($_POST['lst_callcenter'])) ? intval($_POST['lst_callcenter']) : 0;
$sup_id = (isset($_POST['lst_supervisor'])) ? intval($_POST['lst_supervisor']) : 0;
$rep_id = (isset($_POST['lst_reps'])) ? intval($_POST['lst_reps']) : 0;

// Check selection
if ($cc_id==0) $sup_id = 0;
if ($sup_id==0) $rep_id = 0;

// Merge Callcenter list
$TBS->MergeBlock('cc','mysql','SELECT cc_id, cc_name FROM t_callcenter ORDER BY name');

// Merge Supervisor list
if ($cc_id>0) {
  $TBS->MergeBlock('sup','mysql','SELECT sup_id, sup_name FROM t_supervisor WHERE (cc_id='.$cc_id.') ORDER BY sup_name');
} else {
  $TBS->MergeBlock('sup','clear');
}

// Merge Reps list
if ($sup_id>0) {
  $TBS->MergeBlock('rep','mysql','SELECT rep_id, rep_name FROM t_reps WHERE (sup_id='.$sup_id.') ORDER BY rep_name');
} else {
  $TBS->MergeBlock('rep','clear');
}
By: Ignacio
Date: 2005-04-01
Time: 22:18

Re: 2 selects dependents (combo) Javascript

please, i like to see an example me in operation on this using Javascript or if it does not exist alternative, that is in php.  I need to arm something like selects of here: 

http://www.ig2producciones.com.ar/clientes/30n/admin/formAgregarNovedades.php

I need something that walks equal to that and it please takes the data me from the data base... and an example walking because I follow without understanding well as it is the operation.
By: Skrol29
Date: 2005-04-02
Time: 02:04

Re: 2 selects dependents (combo) Javascript

Ok, give me the MySql data, and I'll make and example.
By: Ignacio
Date: 2005-04-02
Time: 06:30

Re: 2 selects dependents (combo) Javascript

http://www.ig2producciones.com.ar/data.zip

please!!
By: Skrol29
Date: 2005-04-03
Time: 03:09

Re: 2 selects dependents (combo) Javascript

Here is an example that worls with your data:

PHP:
<?php

$cnx_id = mysql_connect('localhost','root','') ;
mysql_select_db('test',$cnx_id) ;

include_once('tbs_class.php') ;
$TBS = new clsTinyButStrong ;
$TBS->LoadTemplate('test.htm') ;

$TBS->MergeBlock('pais1,pais2',$cnx_id,'SELECT id,pais FROM inmoby_conf_pais ORDER BY pais');
$TBS->MergeBlock('prov',$cnx_id,'SELECT id,id_pais,provincia FROM inmoby_conf_provincias ORDER BY id_pais,provincia');

$TBS->Show() ;

?>

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

var lst_pais = new Array();
[pais1;block=begin]lst_pais[[pais1.id]] = {name: '[pais1.pais;htmlconv=esc]', lst_prov: new Array()};
[pais1;block=end]
[prov;block=begin]lst_pais[[prov.id_pais]].lst_prov[[prov.id]] = {id: [prov.id], name: '[prov.provincia;htmlconv=esc]'};
[prov;block=end]

function f_Pais_Change() {
    var pais_id = document.forms.frm1.elements.sel_pais.value;
    var lst_src = lst_pais[pais_id].lst_prov;
    var lst_dst = document.forms.frm1.elements.sel_prov;
    var i = 0;
    // Erase all items but the first
    for (i=lst_dst.options.length-1;i>0;i--) {
        lst_dst.options[i] = null;
    }
    // Insert new items
    for (i in lst_src) {
        lst_dst.options[lst_dst.options.length] = new Option(lst_src[i].name,lst_src[i].id);
    }
}
</script>
</head>
<body>
<form name="frm1">
  Pais:
  <select name="sel_pais" id="sel_pais" onChange="f_Pais_Change()">
    <option value="0">&lt;select an item&gt;</option>
    <option value="[pais2.id]">[pais2.pais;block=option]</option>
  </select>
  Provincia:
  <select name="sel_prov" id="sel_prov">
    <option>&lt;select an item&gt;</option>
  </select>
</form>
</body>
</html>
By: Pirjo Posio
Date: 2005-04-03
Time: 14:25

Re: 2 selects dependents (combo) Javascript

Three times hip-hip-hooray! to Skrol29!!!
I also had the same problem, and this is the quickest way to solve it.
If we also want to give the possibility to use this without JavaScript, then I suppose we should put your earlier solution above between [noscript] and [/noscript] tags - haven't tested yet.
By: Ignacio
Date: 2005-04-03
Time: 20:11

Re: 2 selects dependents (combo) Javascript

jejejejejeje, yeah! i dont know english, but, thanks!!! its works!!
By: Ignacio
Date: 2005-04-03
Time: 22:45

Re: 2 selects dependents (combo) Javascript

Skrol29, its was excellent that script, worked perfect. 

I am arming forms to add, to erase, and to modify registries of the data bases.  In another data base, I keep the related registries that you did to me with <select>. 

Now i need in a form to modify (<select value="id" selected></select>), that appears id_pais and id_prov as "id" selected.  He will be very complicated to make? 

Greetings.

PD: sorry about my little english!
By: Skrol29
Date: 2005-04-05
Time: 00:03

Re: 2 selects dependents (combo) Javascript

>Now i need in a form to modify (<select value="id" selected></select>),
> that appears id_pais and id_prov as "id" selected.  He will be very >complicated to make?

I'm sorry, I don't think I understand what you mean.
By: Ignacio
Date: 2005-04-05
Time: 00:09

Re: 2 selects dependents (combo) Javascript

nevermine! sorry about my english, i already did it! tankx anyway!
By: Martin
Date: 2005-04-20
Time: 21:18

Re: 2 selects dependents (combo) Javascript

I changed your code to work with a catergory and product select instead of the pias and prov selects. But my problem is that every time when the page is refreshed the second select list, in my case the product list, is empty. What I try to achieve is a to have the current selected items selected after a form submit

I added this to the php code:
    $categoryId = (isset($_POST['sel_category'])) ? intval($_POST['sel_category']) : 0;
    $productId = (isset($_POST['sel_product'])) ? intval($_POST['sel_product']) : 0;

This works for the first select (it stays selected).

html
    <body>
        <form name="frm1" method="POST" >
            Category:
            <select name="sel_category" id="sel_category" onChange="f_category_Change()">
                <option value="0">&lt;select an item&gt;</option>
                <option value="[category2.Id]">[category2.Name;block=option]</option>
                <option>[var.categoryId;selected]</option>
            </select>
            Product:
            <select name="sel_product" id="sel_product">
                <option>&lt;select an item&gt;</option>
            </select>
            Range:
            <input type="submit" value="Show">
        </form>

So every time when I submit the form, the product select only shows <select an item> with an empty list. Instead that the current item stays selected with the complete list.

Can anyone give me a pointer what to change so that the second select maintains it's list and selection. Thanks in advance.
By: Ignacio
Date: 2005-04-20
Time: 21:24

Re: 2 selects dependents (combo) Javascript

this is with remote scripting?
By: Martin
Date: 2005-04-20
Time: 21:41

Re: 2 selects dependents (combo) Javascript

I'am not sure what you mean? This is with the latest example above made by Skroll. So this includes two selects, javascript and mysql.
By: Skrol29
Date: 2005-04-22
Time: 15:28

Re: 2 selects dependents (combo) Javascript

Hello,

I've posted a new Tip & Trick about how to make 3 independent <select> list-boxes using JavaScript.

Enjoy,