Select combobox Region ==> City

[viki1967]

Hi everyone.

Help with this problem.

With Google I found this script:

var regiondb = new Object()
regiondb["Assente"] = [{value:"Ferie", text:"Ferie"},
                      {value:"Festività abolita", text:"Festività abolita"},
                      {value:"Malattia", text:"Malattia"},
                      {value:"Infortunio", text:"Infortunio"},
                      {value:"Riposo Fisiologico", text:"Riposo Fisiologico"},
                      {value:"Riposo Compensativo", text:"Riposo"},
                      {value:"Permesso retribuito", text:"Permesso"},
                      {value:"Permesso Sind./ARCA", text:"Permesso Sind."},
                      {value:"Ricovero Ospedaliero", text:"Ricovero"},
                      {value:"Part-time", text:"Part-time"},
                      {value:"Assemblea Sindacale", text:"Assemblea"},
                      {value:"Sciopero", text:"Sciopero"},
                      {value:"Aspettativa", text:"Aspettativa"},
                      {value:"Carica Pubblica", text:"Carica Pubblica"},
                      {value:"Da giustificare", text:"Da giustificare"}];
                      
regiondb["Presente"] = [{value:"Monoperatore", text:"Monoperatore"},
                        {value:"Coppia", text:"Coppia"},
                        {value:"Formazione a tre", text:"Formazione a tre"},
                        {value:"Appoggio", text:"Appoggio"},
                        {value:"Fuori sede", text:"Fuori sede"},
                        {value:"In sede", text:"In sede"}];

 
function setCities(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.form.elements["tipo_stato_giornaliero"];
    while (cityChooser.options.length) {
        cityChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona valore";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[ i ].text;
            newElem.value = db[ i ].value;
            cityChooser.add(newElem, where);
        }
    }

I change this way:

Have a variable ( associated with the selected value from select Choose a Region ), which can be A or B.

I select the value Presente ( variable A ) from select Choose a Region :

1) When the variable is A, in select Choose a City is:

 
<option value="Fuori Sede">Fuori Sede</option>
<option value="In Sede">In Sede</option>

I select the value Presente ( variable B ) from select Choose a Region :

2) When the variable is B in select Choose a City is:

    
<option value="Coppia">Coppia</option>
<option value="Formazione a tre">Formazione a tre</option>
<option value="Appoggio">Appoggio</option>
<option value="Fuori Sede">Fuori Sede</option>
<option value="In Sede">In Sede</option>

Is possible?

Regards,
Viki

[acoder]

Yes, it's possible.

What problems are you having with implementing it?

[viki1967]

Yes, it's possible.

What problems are you having with implementing it?

Thanks for your answer.

My problem is:
I not have idea to set this variable A o B in this script...

[acoder]

Use the onchange event handler to change the city drop down.

[viki1967]

Use the onchange event handler to change the city drop down.

Sorry Acoder.... not understand... for example ?

[acoder]

[HTML]<select name="region" onchange="setCi ties(this)">[/HTML] You may need to change the values in the array to the options that you want displayed.

[viki1967]

Is already planned in this script:

var regiondb = new Object()
regiondb["Assente"] = [{value:"Ferie", text:"Ferie"},
                      {value:"Festività abolita", text:"Festività abolita"},
                      {value:"Malattia", text:"Malattia"},
                      {value:"Infortunio", text:"Infortunio"},
                      {value:"Riposo Fisiologico", text:"Riposo Fisiologico"},
                      {value:"Riposo Compensativo", text:"Riposo"},
                      {value:"Permesso retribuito", text:"Permesso"},
                      {value:"Permesso Sind./ARCA", text:"Permesso Sind"},
                      {value:"Ricovero Ospedaliero", text:"Ricovero"},
                      {value:"Part-time", text:"Part-time"},
                      {value:"Assemblea Sindacale", text:"Assemblea"},
                      {value:"Sciopero", text:"Sciopero"},
                      {value:"Aspettativa", text:"Aspettativa"},
                      {value:"Carica Pubblica", text:"Carica Pubblica"},
                      {value:"Da giustificare", text:"Da giustificare"}];
                      
regiondb["Presente"] = [{value:"Monoperatore", text:"Monoperatore"},
                        {value:"Coppia", text:"Coppia"},
                        {value:"Formazione a tre", text:"Formazione a tre"},
                        {value:"Appoggio", text:"Appoggio"},
                        {value:"Fuori sede", text:"Fuori sede"},
                        {value:"In sede", text:"In sede"}];

 
function setCities(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.form.elements["tipo_stato_giornaliero"];
    while (cityChooser.options.length) {
        cityChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona valore";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[i].text;
            newElem.value = db[i].value;
            cityChooser.add(newElem, where);
        }
    }


....

<select name="stato_dipendente" onchange="setCities(this)">
<option>Seleziona stato giornaliero</option>
<option value="Assente">Assente</option>
<option value="Presente">Presente</option>
</select></td>

<select name="tipo_stato_giornaliero" onchange="onChangeStatus(this);"><option>Seleziona tipo stato giornaliero</option>
</select>

In this script implement variable A or B.

[acoder]

Oh, I see.

You will need to create separate arrays, e.g.
[CODE=javascript]regiondb["PresenteA"] = [{value:"Fuori sede", text:"Fuori sede"},
{value:"In sede", text:"In sede"}];
regiondb["PresenteB"] = [{value:"Monoper atore", text:"Monoperat ore"},
{value:"Coppia" , text:"Coppia"},
{value:"Formazi one a tre", text:"Formazion e a tre"},
{value:"Appoggi o", text:"Appoggio" },
{value:"Fuori sede", text:"Fuori sede"},
{value:"In sede", text:"In sede"}];


function setCities(choos er) {
...
var choice = chooser.options[chooser.selecte dIndex].value;
var db = regiondb[choice+regionVa r]; // regionVar is A or B[/CODE]

[viki1967]

Sorry... but:

Error: 'regionVar' is undefined

:(

[acoder]

I know, that was just an example. I expected that you'd set it somewhere.

I'm not sure when it has to change. That's not clear from what you've posted so far.

[viki1967]

Right, but not easy explain here...

The idea is select presente from the select name stato_dipendent e :

<select name="stato_dipendente" onchange="setCities(this)">
<option>Seleziona stato giornaliero</option>
<option value="Assente">Assente</option>
<option value="Presente">Presente</option>
</select></td>

When select presente in the select name stato_dipendent e, sending variable as the function setCities.

The function setCities receives this variable and in the select name tipo_stato_gior naliero :

1) Variable A ===> regiondb["PresenteA"]
2) Variable B ===> regiondb["PresenteB"]

thanks for your help...

[acoder]

That still doesn't explain when A becomes B or vice versa.

If you keep a global variable, you don't even need to pass the variable in the onchange function.

[viki1967]

1) The variable is A when in select D1 is selected value DVD or value DVDR .

2) The variable is B when in select D1 is selected value CDR or value CD .

        

<select size="8" name="D1" multiple>
	<option>Select</option>
	<option value="A-DVD">DVD</option>
    <option value="A-DVDR">DVDR</option>
	<option value="B-CDR">CDR</option>
    <option value="B-CD">CD</option>
</select>

[viki1967]

My page htm this:

<html>

<head>

<script language="javascript">

<!--

var regiondb = new Object()
regiondb["Assente"] = [{value:"Ferie", text:"Ferie"},
                      {value:"Festività abolita", text:"Festività abolita"},
                      {value:"Malattia", text:"Malattia"},
                      {value:"Infortunio", text:"Infortunio"},
                      {value:"Riposo Fisiologico", text:"Riposo Fisiologico"},
                      {value:"Riposo Compensativo", text:"Riposo"},
                      {value:"Permesso retribuito", text:"Permesso"},
                      {value:"Permesso Sind./ARCA", text:"Permesso Sind"},
                      {value:"Ricovero Ospedaliero", text:"Ricovero"},
                      {value:"Part-time", text:"Part-time"},
                      {value:"Assemblea Sindacale", text:"Assemblea"},
                      {value:"Sciopero", text:"Sciopero"},
                      {value:"Aspettativa", text:"Aspettativa"},
                      {value:"Carica Pubblica", text:"Carica Pubblica"},
                      {value:"Da giustificare", text:"Da giustificare"}];
                      
regiondb["PresenteA"] = [{value:"Fuori sede", text:"Fuori sede"},
                        {value:"In sede", text:"In sede"}];
                        
regiondb["PresenteB"] = [{value:"Monoperatore", text:"Monoperatore"},
                        {value:"Coppia", text:"Coppia"},
                        {value:"Formazione a tre", text:"Formazione a tre"},
                        {value:"Appoggio", text:"Appoggio"},
                        {value:"Fuori sede", text:"Fuori sede"},
                        {value:"In sede", text:"In sede"}];
 
 
function setCities(chooser) 

{
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.form.elements["tipo_stato_giornaliero"];
    while (cityChooser.options.length)
    
 {
        cityChooser.remove(0);
    }
    
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice+regionVar]; // regionVar is A or B

    newElem = document.createElement("option");
    newElem.text = "Seleziona valore";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") 
    
    {
        for (var i = 0; i < db.length; i++) 
        
        {
            newElem = document.createElement("option");
            newElem.text = db[ i ].text;
            newElem.value = db[ i ].value;
            cityChooser.add(newElem, where);
        }
    }

} 
   
    // -->
    
</script>

</head>

<body>

<form method="POST" action="page.asp">

<select size="8" name="D1" multiple onChange="window.document.location='select.htm?var='+this.options[this.selectedIndex].value+'';">
	<option>Select</option>
	<option value="A-DVD">DVD</option>
	<option value="A-DVDR">DVDR</option>
	<option value="B-CDR">CDR</option>
	<option value="B-CD">CD</option>
</select>
	

<select name="stato_dipendente" onchange="setCities(this)">
	<option>Seleziona stato giornaliero</option>
	<option value="Assente">Assente</option>
	<option value="Presente">Presente</option>
</select></td>

<select name="tipo_stato_giornaliero" onchange="onChangeStatus(this);">
	<option>Seleziona tipo stato giornaliero</option>
</select>
	
</form>

</body>

</html>

1) The variable is A when in select D1 is selected value DVD or value DVDR .

2) The variable is B when in select D1 is selected value CDR or value CD .

<select size="8" name="D1" multiple>
    <option>Select</option>
    <option value="A-DVD">DVD</option>
    <option value="A-DVDR">DVDR</option>
    <option value="B-CDR">CDR</option>
    <option value="B-CD">CD</option>
</select>

The idea is select presente from the select name stato_dipendent e :

<select name="stato_dipendente" onchange="setCities(this)">
<option>Seleziona stato giornaliero</option>
<option value="Assente">Assente</option>
<option value="Presente">Presente</option>
</select></td>

When select presente in the select name stato_dipendent e, sending variable as the function setCities.

The function setCities receives this variable and in the select name tipo_stato_gior naliero :

1) Variable A ===> regiondb["PresenteA"]
2) Variable B ===> regiondb["PresenteB"]

The error is:
Error: 'regionVar' is undefined

Link page:

http://www12.asphost4free.com/viki1967/select.htm

thanks for your help...

[acoder]

You'll have to set regionVar to avoid the error. You could call it anything really.

Now, the select element is multiple. What if the user selects both A and B type options?

Another thing to look at is the value of the options. Can these just be "A" or "B"? If they can, then good. If not, I can show you how to get the value.

What you need to do is give the select element an id and then use document.getEle mentById(whatev er-ID-name-you-chose) to get the element. If it's a single type select, you can just use .value to get the value. If it's a multiple, you will need to loop over to get the selected option values. Set this to regionVar (or whatever variable name you want) and you're ready to go.