Link to home
Start Free TrialLog in
Avatar of ale2000
ale2000

asked on

combo box

How can i do this? fisrt of all forgive my english!!

I want to put 2 combos
For example one for countrys and the second for states.
And when I click the  country´s combo I want that on the states combo appears only the states of that country
Avatar of ale2000
ale2000

ASKER

Adjusted points from 200 to 250
Avatar of ale2000
ale2000

ASKER

URGENT!!
Avatar of staynegative
staynegative
Are you pulling information from a database or are you doing these by hand?

If you are pulling info from a DB it is easy to use javascript as such:

your script:
function getStates()
{
   tempSelected = form.country.options[form.country.selectedIndex].value;
   location.href = "samefile.asp?countryID="+tempSelected;
}

<SELECT NAME="country" onChange="getStates();">
....
</SELECT>

This will reload the current page and pass the countryID back in... so if you are using something that has logic you can then say something like:
select statename from states
where countryID = request("countryID")

If you arent pulling the state information from a database... then it is a little harder, but at least this javascript will get you started in the right direction.
jm
Avatar of maneshr
maneshr
here is a working example. i have used websites as an example you can change that to country-state of anything that you want.


==============dyncombo.html

<html>

<head>

<script language="javascript"><!-- hide jscript from old browsers

/****** this object holds all of the key data **********/
function Link(name, url)
{
        this.name = name;
        this.title = new Array();
        this.url = new Array();
}
/**************************************************************/
var names      = new Array ();
var temp       = new Array ();
var temp2               = new Array ();
var link       = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"Javascript*http://www.radix.net/~jtd/test30/java1.htm|Java Page#" +
        "http://ds.dial.pipex.com/town/avenue/xio12/wax/|HOT WAX#" +
        "http://www.wsabstract.com/cutpastejava.htm|Website Abstraction Free JavaScripts!#" +
        "http://www.webteacher.com/javatour/framehol.htm|JavaScript for the Total Non-Programmer#" +
        "http://www.developer.com/directories/pages/dir.javascript.html/|Developer.com#" +
        "http://javascriptsource.com/|The JavaScript Source#" +
        "http://members.aol.com/MHall75819/index.html|Advanced Webpage Design#" +
        "http://www.coolnerds.com/webauth/jscript/Default.htm|Coolnerds - A Webhead's Wonderland#" +
        "http://med-amsa.bu.edu/server/js/|JavaScript Reference Manual#" +
        "http://www.loran.com/reference/javascript-ref/contents.htm|JavaScript Reference#" +
        "http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm|JavaScript Guide#" +
        "http://www.javascriptg.com/completelisting.html|Welcome! - JavaScript Galore#" +
        "http://www.infohiway.com/javascript/indexf.htm|Cut-N-Paste JavaScript#" +
        "http://www.jsworld.com/|JavaScript World --> Welcome!#" +
        "http://www.webconn.com/java/javascript/intro/|Voodoo's Intro to JavaScript#" +
        "http://www.geocities.com/SiliconValley/7116/|The JavaScript Planet#" +
        "http://www.hotwired.com/webmonkey/javascript/?tw=javascript|Webmonkey: javascript collection#" +
        "http://www.macad.org/referral/sair2/jsrefsrc.html|MACAD's SAIR -- JavaScript Database",
"Search Engines*http://home.netscape.com/home/internet-search.html|Netscape Search#" +
        "http://www.excite.com|Excite#http://www.infoseek.com|Infoseek#"+
        "http://www.lycos.com|Lycos#http://www.yahoo.com|Yahoo!#" +
        "http://www.inference.com/|Inference Corporation Home Page",
"Computers and Technology*http://www.atvantage.com/usrbin/atvantage|@vantage#" +
        "http://www.bonzi.com/netscape/voicenet.htm|BONZI Voice Email#" +
        "http://www.techweb.com/|CMP TechWeb#" +
        "http://www.pcmag.com|PC Magazine Online#" +
        "http://www.wired.com/news/|Wired News",
"General News*http://www.abcnews.com|ABCNEWS.com#" +
        "http://www.cnn.com|CNN Interactive#" +
        "http://www.nytimes.com|The New York Times on the Web#" +
        "http://www.usatoday.com|USA Today#" +
        "http://www.abcnews.com/weather/OLM.html|ABCNews.com AccuWeather",
"Shopping*http://www.amazon.com/|Amazon.com Bookstore#" +
        "http://www.catalogsite.com/|Catalog Site#" +
        "http://www.cdnow.com|CDnow#" +
        "http://www.sharperimage.com|The Sharper Image Catalog#" +
        "http://www.surplusdirect.com|Surplus Direct#" +
        "http://www.onsale.com|Welcome to ONSALE!",
"Shareware/Freeware*http://hotfiles.zdnet.com/|ZDNet Software Library#" +
        "http://tucows.holler.net/|Welcome to TUCOWS#" +
        "http://www.shareware.com/|Shareware.com",
"Graphics*http://www.lysator.liu.se/lothlorien/lothlorien.html|Lothlorien, Amateur fantasy art gallery#" +
        "http://www.ssanimation.com/|Entering SS Animation...#" +
        "http://www.enchantress.net/fantasy/index.shtml|Fantasyland Graphics");
/*****************************************************************/
function stringSplit ( string, delimiter ) {
    if ( string == null || string == "" ) {
   return null ;
    } else if ( string.split != null ) {
   return string.split ( delimiter ) ;
    } else {
   var ar = new Array() ;
   var i = 0 ;
   var start = 0 ;
   while( start >= 0 && start < string.length ) {
       var end = string.indexOf ( delimiter, start ) ;
       if( end >= 0 ) {
      ar[i++] = string.substring ( start, end ) ;
      start = end+1 ;
       } else {
      ar[i++] = string.substring ( start, string.length ) ;
      start = -1 ;
       }
   }
   return ar ;
    }
}
/**************************************************************/
function updateMenus ( what ) {
   var n = what.selectedIndex;
   what.form.myLinks.length = final_list[n].title.length;
   for (var x = 0; x < what.form.myLinks.length; x++)
   {
      what.form.myLinks.options[x].text = final_list[n].title[x];
      what.form.myLinks.options[x].value = final_list[n].url[x];
   }
   what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names () {
   document.myForm.main.length = names.length;
   document.myForm.myLinks.length = final_list[0].title.length;
   for ( var i=0; i<names.length; i++ )
      document.myForm.main.options[i].text = final_list[i].name;
        for (var x=0; x<final_list[0].url.length; x++)
      document.myForm.myLinks.options[x].text = final_list[0].title[x];
}
/**************************************************************/
function createMenus () {
   for ( var i=0; i<menu.length; i++ )
   {
                names[i] = stringSplit (menu[i], '*' );
      link = new Link(names[i][0]);
      temp[i] = stringSplit(names[i][1], '#');
                final_list[i] = link;
                for (var x=0; x<temp[i].length; x++)
                {
              temp2[x]  = stringSplit( temp[i][x], '|' );
                        final_list[i].url[x] = temp2[x][0];
                        final_list[i].title[x] = temp2[x][1];
                }
        }
give_names();
}

function tempMsg () {
   msg="I've disabled the Go button so that you could stay on this page an experiment."
   alert (msg)
}

/**************************************************************/
// end jscript hiding -->
</script>
</head>

<body onLoad="createMenus()" background="../images/beanybak.gif">

<h2>Dynamic Select Boxes</h2>

<p>The idea is to set up the
boxes so that making a selection from the first box automatically changes the options that
are available in the second box. For example, after you choose a Category from the first
box below, the second box will present only web sites that are in that category. </p>

<form NAME="myForm">
  <input type="hidden" name="myObject" value="none">
<p>Pick a Category...: <select  NAME="main" size="1" onChange="updateMenus(this)">
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>
    <option></option>
    <option></option>
  </select> </p>
  <p>Then Choose a Site: <select NAME="myLinks" SIZE="1">
    <option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>
    <option> </option>
    <option> </option>
  </select>

<P>
<input type="button" value="go" onclick="tempMsg()"> </p>
</form>
</body>
</html>
Avatar of ale2000
ale2000

ASKER

Adjusted points from 250 to 350
Avatar of ale2000
ale2000

ASKER

if there any direction in the web where i could see an example?
Avatar of knightEknight
knightEknight
Flag of United States of America image
<HTML>
<HEAD>
<TITLE>Options Arrays</title>
<SCRIPT language='JavaScript'>
<!-- //

// create js arrays to hold the data for select2
var sel2data = new Array();

sel2data[0] = new Array();
sel2data[0][0] = new Option("Option 1 - 0","10");
sel2data[0][1] = new Option("Option 1 - 1","11");
sel2data[0][2] = new Option("Option 1 - 2","12");

sel2data[1] = new Array();
sel2data[1][0] = new Option("Option 2 - 0","20");
sel2data[1][1] = new Option("Option 2 - 1","21");

sel2data[2] = new Array();
sel2data[2][0] = new Option("Option 3 - 0","30");
sel2data[2][1] = new Option("Option 3 - 1","31");
sel2data[2][2] = new Option("Option 3 - 2","32");
sel2data[2][3] = new Option("Option 3 - 4","33");


function switchvalues (sel1)
{
    if ( sel1.selectedIndex == -1 )
    {
        return;
    }

    var destary = document.myform.myselect2.options;

    // first, clear the destination select
    destary.length=0;
   
    // then, load it with corresponding values
    for ( var i=0; i<sel2data[sel1.selectedIndex].length; i++ )
    {
        // the line below no longer works in IE5 because MS can't get their javascript engine right.
        // destary[destary.length-1] = new Option(sel2data[sel1.selectedIndex][i].text,sel2data[sel1.selectedIndex][i].value);
       
        destary.length++;
        destary[destary.length-1].text  = sel2data[sel1.selectedIndex][i].text;
        destary[destary.length-1].value = sel2data[sel1.selectedIndex][i].value;
    }
}

// -->
</script>
</head>

<BODY>
  <FORM name="myform">
    <SELECT name="myselect1" size="5" onChange='switchvalues(this);'>
      <OPTION value="10" > - Option 1 - </option>
      <OPTION value="20" > - Option 2 - </option>
      <OPTION value="30" > - Option 3 - </option>
    </select><BR>

    <SELECT name="myselect2" size="5" onChange='alert(this.options[this.selectedIndex].value)'>
      <OPTION>Dummy Entry</option>
    </select><BR>
  </form>
</body>
</html>
Avatar of knightEknight
knightEknight
Flag of United States of America image
___________________________________________________________________________________________________
Avatar of knightEknight
knightEknight
Flag of United States of America image
To test, simply cut-and-paste the code above into notepad and save it as an HTML file on your hard-drive (test.html).  Then use your browser to open it (File/Open/Browse -- and choose the file).
ASKER CERTIFIED SOLUTION
Avatar of dejavu007
dejavu007
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dejavu007
dejavu007
the above code works equally well in netscape and explorer and to test it just cut it and paste it in notepad and save it as a html file.

ciao

dejavu007
Avatar of davlun20080
davlun20080
Hi There,
Just one more sample, place this script (not my work but I found it a long time ago) where you want the menus to be located.  It also works for ie3 and ns3 as well.  

To use, find the area where it lists newCat and new Item. Replace with your choices as many or few as you wish. Leave the rest alone.  

Good luck,
davlun

<script language = "JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function makeItem(name, url) {
this.name = name;
this.url = url;}
function newItem(name, url) {
itemsIndex++;
cats[catsIndex][itemsIndex] = new makeItem(name, url);
cats[catsIndex].length++;}
function makeCat(name) {
this.name = name;
this.length = 0;}
function newCat(name) {
catsIndex++
itemsIndex = -1;
cats[catsIndex] = new makeCat(name);}
function relateItems(cat) {
if (isNS3) {
if (cat > 0) {
catsIndex = cat - 1;
with (document.m.m2) {
for (var i = options.length; i > 1; i--) options[i] = null;
for (var i = 0; i < cats[catsIndex].length; i++) options[i + 1] = new Option(cats[catsIndex][i].name);
options[0].selected = true;
      }
   }
}
else {
if (m1.listIndex > 0) {
m2.clear();
m2.addItem(itemHeading);
catsIndex = m1.listIndex - 1;
for (var i = 0; i < cats[catsIndex].length; i++)
m2.addItem(cats[catsIndex][i].name);
m2.listIndex = 0;
   }
}
itemsIndex = 0;
}
function gotoPage(item) {
var url = null;
if (isNS3 && item > 0) url = cats[catsIndex][item - 1].url;
if (isIE && m2.listIndex > 0) url = cats[catsIndex][m2.listIndex - 1].url;
if (url != null) window.location.href = url;
}
function addHeadings() {
m1.addItem(catHeading);
for (var i = 0; i < cats.length; i++) m1.addItem(cats[i].name);
m1.listIndex = 0;
m2.addItem(itemHeading);
m2.listIndex = 0;
}
var isNS3 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3);
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var cats = new Array();
var catsIndex = -1;
var itemsIndex = -1;
var catHeading = 'Make Topic Selection Here';  //     Update box initial values here
var itemHeading = 'Choose Specific Activity Here';
var betweenHeading = '  then   ';
newCat('MAIN');
newItem('Home Page', 'http://.com');
newCat('Quotes of the day');
newItem('Poem', 'somefile.htm');
newItem('Poem 2', 'somefile.htm');
newCat('New');
newItem('PLA', 'somefile.htm');
newItem('PLH', 'somefile.htm');
newCat('Email Us');
newItem('Getting Started', 'somefile.htm');
newItem('Reading Email', 'somefile.htm');
newItem('Sending Email', 'somefile.htm#send');
newCat('Billing');
newItem('Pay in Full', 'somefile.htm');
newItem('Monthly Pay', 'somefile.htm');
newCat('Other');
newItem('PLM', 'somefile.htm')
newItem('CLM', 'somefile.htm');
newItem('Recent Announcements', 'somefile.htm');
newItem('Archived Announcements', 'somefile.htm');
// End -->
</script>
      <script language = "VBScript">
Sub m1_Change()
call relateItems
End Sub
Sub m2_Change()
call gotoPage
End Sub
Sub Window_onLoad()
call addHeadings
End Sub
</script>
      <script language = "JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
if (isNS3) {
document.write('<FORM NAME = "m">');
document.write('<SELECT NAME = "m1" ');
document.write('onChange = "relateItems(this.selectedIndex)">');
document.write('<OPTION>' + catHeading + '</OPTION>');
for (var i = 0; i < cats.length; i++) {
document.write('<OPTION>' + cats[i].name + '</OPTION>');
}
document.write('</SELECT>' + betweenHeading);
document.write('<SELECT NAME = "m2" ');
document.write('onChange = "gotoPage(this.selectedIndex)">');
document.write('<OPTION>' + itemHeading + '</OPTION>');
for (var i = 0; i < 10; i++) document.write('<OPTION></OPTION>');
document.write('</SELECT></FORM>');
for (var i = document.m.m2.options.length; i > 0; i--)
document.m.m2.options[i] = null;
}  
else if (isIE) {
document.write('<OBJECT ID = "m1" WIDTH = "221" ');
document.write('HEIGHT = "24" CLASSID = ');
document.write('"CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
document.write('</OBJECT>');
document.write(betweenHeading);
document.write('<OBJECT ID = "m2" WIDTH = "221" HEIGHT = "24" CLASSID =');
document.write('"CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3">');
document.write('<PARAM NAME = "VariousPropertyBits" VALUE = "746604571">');
document.write('<PARAM NAME = "Size" VALUE = "5574;635">');
document.write('<PARAM NAME = "MatchEntry" VALUE = "1">');
document.write('<PARAM NAME = "FontCharSet" VALUE = "0">');
document.write('<PARAM NAME = "FontPitchAndFamily" VALUE = "2">');
document.write('<PARAM NAME = "DisplayStyle" VALUE = "3">');
document.write('<PARAM NAME = "ShowDropButtonWhen" VALUE = "2">');
document.write('</OBJECT>');
// End -->
}
</script>
Avatar of ale2000
ale2000

ASKER

I want to   know more about how con I do
the examples of the combos, but extracting the information on a database
Staynegative wrote about this
but I don't know much about asp and so on. If anybody can help ...
All the other examples work great!!! Thanks to all of you
Avatar of dejavu007
dejavu007
ale2000,

   i have worked on that too, i have a sample code that actually works for my site, i have manufacturers and models of cars. when i choose the manufacturer, example ford, then the second drop down box immediately shows only the ford models. i take pride in doing this code with my friends and would not mind sharing the logic for it. it was done from values taken from the database and the best part is that we dont actually go back to the server to fetch the data, everything happens at the client side. please let me know ur requirements. and to just help me out could u post it as another question so that i could make some points on the way too, and by the way thanks for the huge score u gave me that was a pleasant shock today.

ciao

dejavu007