select box problem
Moderator: General Moderators
select box problem
hi all,
does anyone know how i can change the values in a second select drop down according to what value is selected in the first select drop down, without refreshing the page.
for example
if in select drop down 1 i have a list of companies.
in select box 2 i want to list the employees at the company i select in drop down 1.
i know this can be done via arrays in javascript but i have no clue on how to achieve this...has anyone got any script to do this. i do not want to refresh the page.
thanks in advance.
does anyone know how i can change the values in a second select drop down according to what value is selected in the first select drop down, without refreshing the page.
for example
if in select drop down 1 i have a list of companies.
in select box 2 i want to list the employees at the company i select in drop down 1.
i know this can be done via arrays in javascript but i have no clue on how to achieve this...has anyone got any script to do this. i do not want to refresh the page.
thanks in advance.
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
these examples use multi select boxes....and chuck the selected options to the next select box. i'm trying to do something different....i'm using two seperate drop down select boxes...with single selections.
<select name="box1">
<option value="1">MICROSOFT</option>
<option value="2">BBC</option>
</select>
<select name="box2">
<option value=""></option>
</select>
when i pick a selection from say box 1, i want the related options in the linked database table to appear in select drop down box 2. for example...i migt have harry,john working for MICROSOFT....so when i pick MICROSOFT box2 should display harry and john.
<select name="box1">
<option value="1">MICROSOFT</option>
<option value="2">BBC</option>
</select>
<select name="box2">
<option value=""></option>
</select>
when i pick a selection from say box 1, i want the related options in the linked database table to appear in select drop down box 2. for example...i migt have harry,john working for MICROSOFT....so when i pick MICROSOFT box2 should display harry and john.
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
then try something like this (with some ajustments, just typed it out)
box1:
box2:
box1:
Code: Select all
onchange = change_box2();box2:
Code: Select all
<select>
<div id="box2>
<option value="1">John</option>
</div>
</select>Code: Select all
function change_box2(){
box.2.innerHTML = "<option value="2">Doe</option>";
}i tried this but it didnt work....can you see why?
i'm going to query the databse in <select name="f_reference" class="whiteforms"> to get the options relating to <select name="cc"> box which already has the options in it.
sorry but i'm real stuck please help....
Code: Select all
<script>
function change_box2(){
cc.4.innerHTML = "<option value="2">Doe</option>";
}
</script>Code: Select all
<select name="cc" class="whiteforms" onchange = "change_box2();">
<option value="0">---- Please Select -----</option>
<?php
while (list($key,$value) = each($frn_wsid))
{
$sql_website_section_create = "select * from tbl_website_section where wsid = $value order by ws_name asc";
$mysql_result_website_section_create = mysql_query($sql_website_section_create,$my_conn);
$get_website_section_create = mysql_fetch_assoc($mysql_result_website_section_create);
$wsv1 = $get_website_section_createї'wsid'];
$wsv2 = $get_website_section_createї'ws_name'];
?>
<option value="<?php echo $wsv1 ?>"><?php echo $wsv2; ?></option>
<?php } //close loop (list($key,$value) = each($frn_wsid)) ?>
</select>
<select name="f_reference" class="whiteforms">
</select>sorry but i'm real stuck please help....
have a look at http://www.autotrader.co.uk/
the form at the top right of the page has the behaviour you are wanting to achieve. When you select the make of the car in the first drop down, changes to second drop down to only display model by that manufacturer.
You can easily grab and modify that code. I was gonna get it for you, but then i would be taking all the fun away for you.
Mark
the form at the top right of the page has the behaviour you are wanting to achieve. When you select the make of the car in the first drop down, changes to second drop down to only display model by that manufacturer.
You can easily grab and modify that code. I was gonna get it for you, but then i would be taking all the fun away for you.
Mark
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
ok people i done this and nothing showed in the menu bar why?
what am i missing? i thought id take the script as it is from auto trader and then make it dynamic but how come nothing appears in both select boxes.
Code: Select all
<script language="JavaScript">
_model = new Array();
_modelї0] = new Array('MODEL','ANY MODEL');
_modelї1] = new Array('MODEL','ANY MODEL');
_modelї2] = new Array('ANY','ACE','COBRA','SUPERBLOWER');
_modelї3] = new Array('ANY','400','500');
_modelї4] = new Array('ANY','145','146','147','155','156','164','166','33','75','ALFASUD','GIULIETTA','GTV','SPIDER','SPORTWAGON','SPRINT','SZ');
_modelї5] = new Array('ANY','TD21');
_modelї6] = new Array('ANY','ROCSTA');
_modelї7] = new Array('ANY','DB2','DB4','DB5','DB6','DB7','DBS','LAGONDA','V8','VANQUISH','VANTAGE','VIRAGE','VOLANTE');
_modelї8] = new Array('ANY','100','100 AVANT','200','80','90','A2','A3','A4','A4 AVANT','A6','A6 AVANT','A8','ALLROAD','AVANT','CABRIOLET','CONVERTIBLE','COUPE','QUATTRO','RS2','RS4 AVANT','S2','S3','S4','S4 AVANT','S6','S6 AVANT','S8','TT','V8');
_modelї9] = new Array('ANY','ALLEGRO','BEACONSFIELD','HEALEY','MAESTRO','MAXI','METRO','MINI','MONTEGO','PRINCESS');
_modelї10] = new Array('ANY','ARNAGE','AZURE','BROOKLANDS','CONTINENTAL','CORNICHE','EIGHT','MULSANNE','SERIES II','T SERIES','TURBO R');
_modelї11] = new Array('ANY','1502','2002','3 SERIES','5 SERIES','6 SERIES','7 SERIES','8 SERIES','ALPINA','CSA','M COUPE','M ROADSTER','M3','M5','M6','X5','Z1','Z3','Z4','Z8');
_modelї12] = new Array('ANY','411','412','BLENHEIM');
_modelї13] = new Array('ANY','BROUGHAM','ELDORADO','ESCALADE','FLEETWOOD','SEVILLE');
_modelї14] = new Array('ANY','SUPER SEVEN','SUPER SPRINT');
_modelї15] = new Array('ANY','210','ASTRO','BLAZER','CAMARO','CORVETTE','GMC','S10','SILVERADO','SUBURBAN','TAHOE');
_modelї16] = new Array('ANY','CHEROKEE','GRAND CHEROKEE','GRAND VOYAGER','JEEP','NEON','PT CRUISER','SEBRING','VIPER','VOYAGER','WRANGLER');
_modelї17] = new Array('ANY','2 CV','AX','BERLINGO','BX','C3','C5','C8','CX','DE','REFLEX','SAXO','SYNERGIE','VISA','XANTIA','XM','XSARA','XSARA PICASSO','ZX');
_modelї18] = new Array('ANY','DORCHESTER');
_modelї19] = new Array('ANY','ESPERO','KALOS','KORANDO','LANOS','LEGANZA','MATIZ','MUSSO','NEXIA','NUBIRA','TACUMA');
_modelї20] = new Array('ANY','APPLAUSE','CHARADE','COPEN','CUORE','DOMINO','FOURTRAK','GRAND MOVE','HIJET','MIRA','MOVE','SIRION','SPORTRAK','TERIOS','YRV');
_modelї21] = new Array('ANY','DOUBLE SIX','EMPRESS','LIMOUSINE','SALOON','SOVEREIGN','SUPER V8','V8','XJ SERIES','XJ12');
_modelї22] = new Array('ANY','PATROL');
_modelї23] = new Array('ANY','DMZ');
_modelї24] = new Array('ANY','DAKOTA','DURANGO','RAM','VIPER');
_modelї25] = new Array('ANY','246','250','308','328','330','348','355','360','365','400','412','456','512','550','575M','DAYTONA','DINO','ENZO','F355','F40','MONDIAL','TESTAROSSA');
_modelї26] = new Array('ANY','124','126','130','500','BARCHETTA','BRAVA','BRAVO','CINQUECENTO','COUPE','CROMA','DOBLO','MAREA','MULTIPLA','PANDA','PUNTO','REGATA','SEICENTO','SPIDER','STILO','TEMPRA','TIPO','ULYSSE','UNO','X19');
_modelї27] = new Array('ANY','CAPRI','CONSUL','CORTINA','COUGAR','ECONOLINE','ESCORT','EXCURSION','EXPEDITION','EXPLORER','F150','F350','FALCON','FIESTA','FOCUS','FUSION','GALAXY','GRANADA','KA','MAVERICK','MONDEO','MUSTANG','ORION','PROBE','PUMA','RANGER','SAPPHIRE','SCORPIO','SHERROD','SIERRA','STREETKA','TAURUS');
_modelї28] = new Array('ANY','CARO');
_modelї29] = new Array('ANY','G SERIES');
_modelї30] = new Array('ANY','ANY');
_modelї31] = new Array('ANY','110');
_modelї32] = new Array('ANY','IMP','MINX');
_modelї33] = new Array('ANY','MK IV SE');
_modelї34] = new Array('ANY','ACCORD','AERODECK','BALLADE','BEAT','CIVIC','CONCERTO','CR-V','CR-X','HR-V','INSIGHT','INTEGRA','JAZZ','LEGEND','LOGO','NSX','PRELUDE','S2000','SHUTTLE','STREAM');
_modelї35] = new Array('ANY','H2');
_modelї36] = new Array('ANY','ACCENT','AMICA','ATOZ','COUPE','ELANTRA','GETZ','LANTRA','MATRIX','PONY','S-COUPE','SANTA FE','SONATA','STELLAR','TRAJET','X2','XG30');
_modelї37] = new Array('ANY','LELE');
_modelї38] = new Array('ANY','PIAZZA','TF','TROOPER');
_modelї39] = new Array('ANY','E-TYPE','MARK I','MARK II','S-TYPE','SOVEREIGN','V8','X-TYPE','XJ SERIES','XJS','XK');
_modelї40] = new Array('ANY','CHEROKEE','GRAND CHEROKEE','RENEGADE','WRANGLER');
_modelї41] = new Array('ANY','INTERCEPTOR','S-V8');
_modelї42] = new Array('ANY','CARENS','CLARUS','MAGENTIS','MENTOR','PRIDE','RIO','SEDONA','SHUMA','SORENTO','SPORTAGE');
_modelї43] = new Array('ANY','1500','NIVA','RIVA','SAMARA');
_modelї44] = new Array('ANY','COUNTACH','DIABLO','LM','MURCIELAGO','URRACO');
_modelї45] = new Array('ANY','BETA','DEDRA','DELTA','MONTE CARLO','PRISMA','THEMA','Y10');
_modelї46] = new Array('ANY','DEFENDER','DISCOVERY','FREELANDER','LIGHTWEIGHT','RANGE ROVER','SERIES II','SERIES III');
_modelї47] = new Array('ANY','GS','IS','LS','RX','SC','SOARER');
_modelї48] = new Array('ANY','AMBRA');
_modelї49] = new Array('ANY','BLACKWOOD','NAVIGATOR','TOWN CAR');
_modelї50] = new Array('ANY','340R','CARLTON','ECLAT','ELAN','ELISE','ELITE','ESPRIT','EXCEL','EXIGE','XI');
_modelї51] = new Array('ANY','LM','MANTARA','MANTARAY','MANTIS','MANTULA','MARTINA');
_modelї52] = new Array('ANY','222','320','3200','BITURBO','CONVERTIBLE','GHIBLI','KARIF','QUATTROPORTE','SPYDER');
_modelї53] = new Array('ANY','57','62');
_modelї54] = new Array('ANY','121','323','626','DEMIO','EUNOS','MAZDA2','MAZDA6','MPV','MX-3','MX-5','MX-6','PREMACY','RX7','TRIBUTE','XEDOS');
_modelї55] = new Array('ANY','M6');
_modelї56] = new Array('ANY','180','190','200','220','230','240','250','260','280','300','310','320','350','380','400','410','420','450','500','560','600','A CLASS','AMG','C CLASS','CE CLASS','CL','CLK','E CLASS','G CLASS','M CLASS','S CLASS','SE CLASS','SEL SERIES','SL CLASS','SLK','V CLASS','VANEO');
_modelї57] = new Array('ANY','MAESTRO','MAGNETTE','METRO','MGA','MGB','MGF','MIDGET','MONTEGO','ROADSTER','RV8','TD','TF','ZR','ZS','ZT');
_modelї58] = new Array('ANY','VIRGO');
_modelї59] = new Array('ANY','COOPER','MINI','ONE');
_modelї60] = new Array('ANY','3000GT','CARISMA','CHALLENGER','CHARIOT','COLT','CORDIA','DELICA','FTO','GALANT','L200','LANCER','LEGNUM','PAJERO','RALLIART','RVR','SHOGUN','SHOGUN PININ','SIGMA','SPACE RUNNER','SPACE STAR','SPACE WAGON','STARION','STRADA');
_modelї61] = new Array('ANY','4/4','AERO','PLUS 4','PLUS 8');
_modelї62] = new Array('ANY','ITAL','MINI','MINOR');
_modelї63] = new Array('ANY','100 NX','200 SX','280 ZX','300 ZX','ALMERA','ALMERA TINO','BLUEBIRD','CHERRY','FIGARO','LARGO','LAUREL','MAXIMA','MICRA','NAVARA','PATROL','PRAIRIE','PRIMERA','PULSAR','QX','SERENA','SILVIA','SKYLINE','STANZA','SUNNY','TERRANO','X-TRAIL');
_modelї64] = new Array('ANY','M12');
_modelї65] = new Array('ANY','COMMODORE','KADETT','MANTA','MONZA','OMEGA','ZAFIRA');
_modelї66] = new Array('ANY','ZONDA');
_modelї67] = new Array('ANY','KALLISTA');
_modelї68] = new Array('ANY','KELISA','KENARI','NIPPA');
_modelї69] = new Array('ANY','104','106','205','206','305','306','307','309','405','406','504','505','605','607','806','807','PARTNER COMBI');
_modelї70] = new Array('ANY','FIREBIRD','TRANS AM');
_modelї71] = new Array('ANY','356','911','912','924','928','944','968','BOXSTER','CARRERA GT','CAYENNE');
_modelї72] = new Array('ANY','COMPACT','COUPE','GL','GLS','IMPIAN','PERSONA','PROTON','SATRIA','WIRA');
_modelї73] = new Array('ANY','RIALTO','ROBIN','SABRE','SCIMITAR');
_modelї74] = new Array('ANY','11','12','14','15','16','17','18','19','20','21','25','30','4','5','6','7','9','AVANTIME','CLIO','ESPACE','FUEGO','GRAND ESPACE','GTA','KANGOO','LAGUNA','MEGANE','SAFRANE','SCENIC','SPORT SPIDER','VEL SATIS');
_modelї75] = new Array('ANY','ELF','RM SERIES');
_modelї76] = new Array('ANY','20/25','25/30','CORNICHE','PARK WARD','PHANTOM','SILVER CLOUD','SILVER DAWN','SILVER SERAPH','SILVER SHADOW','SILVER SPIRIT','SILVER SPUR','SILVER WRAITH');
_modelї77] = new Array('ANY','100','200','2000','2200','2300','25','3500','400','45','600','75','800','90','CABRIOLET','COUPE','MAESTRO','METRO','MGF','MINI','MONTEGO','STERLING','TOURER','VITESSE');
_modelї78] = new Array('ANY','9-3','9-5','90','900','9000','96','99');
_modelї79] = new Array('ANY','PENZA');
_modelї80] = new Array('ANY','ALHAMBRA','AROSA','CORDOBA','IBIZA','LEON','MALAGA','MARBELLA','TOLEDO','VARIO');
_modelї81] = new Array('ANY','GAZELLE');
_modelї82] = new Array('ANY','FABIA','FAVORIT','FELICIA','OCTAVIA','SUPERB');
_modelї83] = new Array('ANY','CAR','CDI','CITY-COUPE','EDITION','PASSION','PULSE','PURE');
_modelї84] = new Array('ANY','KORANDO','MUSSO');
_modelї85] = new Array('ANY','1600','1800','FORESTER','IMPREZA','JUSTY','LEGACY','SVX','VIVIO','XT');
_modelї86] = new Array('ANY','ALPINE');
_modelї87] = new Array('ANY','ALTO','BALENO','CAPPUCCINO','GRAND VITARA','IGNIS','JIMNY','LIANA','SAMURAI','SJ','SWIFT','VITARA','WAGON R','X-90');
_modelї88] = new Array('ANY','ALPINE','BA75','HORIZON','SAMBA','SOLARA','SUNBEAM');
_modelї89] = new Array('ANY','SAFARI');
_modelї90] = new Array('ANY','4-RUNNER','ALTEZZA','AVENSIS','CAMRY','CARINA','CELICA','COROLLA','CORONA','CRESSIDA','CROWN','ESTIMA','HARRIER','HIACE','HILUX','LANDCRUISER','LITEACE','LUCIDA','MR2','PASEO','PICNIC','PRADO','PREVIA','PRIUS','RAV-4','SERA','SOARER','SPACE CRUISER','STARLET','SUPRA','SURF','TERCEL','TOWNACE','YARIS');
_modelї91] = new Array('ANY','DOLOMITE','SPITFIRE','STAG','TOLEDO','TR4','TR6','TR7','TR8');
_modelї92] = new Array('ANY','280I','3000M','350I','450','CERBERA','CHIMAERA','GRIFFITH','S CONVERTIBLE','S2','S3','T350','TAIMAR','TAMORA','TASMIN','TUSCAN');
_modelї93] = new Array('ANY','SPORT','SPYDER');
_modelї94] = new Array('ANY','AGILA','ASTRA','BELMONT','CALIBRA','CARLTON','CAVALIER','CHEVETTE','CORSA','FRONTERA','MONTEREY','NOVA','OMEGA','ROYALE','SENATOR','SINTRA','TIGRA','VECTRA','VIVA','VX220','ZAFIRA');
_modelї95] = new Array('ANY','BEETLE','BORA','CARAVELLE','CORRADO','DERBY','FASTBACK','GOLF','JETTA','K70','KARMANN','LUPO','PASSAT','PHAETON','POLO','SANTANA','SCIROCCO','SHARAN','TOUAREG','TOURAN','VENTO');
_modelї96] = new Array('ANY','121','122','164','240','244','245','260','264','340','360','440','460','480','740','760','850','940','960','C70','P1800','S40','S60','S70','S80','S90','TORSLANDA','V40','V70','V90','XC70','XC90');
_modelї97] = new Array('ANY','1600','1800','7','MEGA','MEGABIRD','MEGABLADE','SEI');
_modelї98] = new Array('ANY','45','TEMPO');
// List of makes:
make_v = new Array('MAKE','ANY','AC','AIXAM','ALFA ROMEO','ALVIS','ASIA','ASTON MARTIN','AUDI','AUSTIN','BENTLEY','BMW','BRISTOL','CADILLAC','CATERHAM','CHEVROLET','CHRYSLER','CITROEN','COLEMAN MILNE','DAEWOO','DAIHATSU','DAIMLER','DATSUN','DELOREAN','DODGE','FERRARI','FIAT','FORD','FSO','GINETTA','GMC','GRIFFON','HILLMAN','HMC','HONDA','HUMMER','HYUNDAI','ISO','ISUZU','JAGUAR','JEEP','JENSEN','KIA','LADA','LAMBORGHINI','LANCIA','LAND ROVER','LEXUS','LIGIER','LINCOLN','LOTUS','MARCOS','MASERATI','MAYBACH','MAZDA','MCLAREN','MERCEDES-BENZ','MG','MICROCAR','MINI','MITSUBISHI','MORGAN','MORRIS','NISSAN','NOBLE','OPEL','PAGANI','PANTHER','PERODUA','PEUGEOT','PONTIAC','PORSCHE','PROTON','RELIANT','RENAULT','RILEY','ROLLS-ROYCE','ROVER','SAAB','SAO','SEAT','SINGER','SKODA','SMART CAR','SSANGYONG','SUBARU','SUNBEAM','SUZUKI','TALBOT','TATA','TOYOTA','TRIUMPH','TVR','ULTIMA','VAUXHALL','VOLKSWAGEN','VOLVO','WESTFIELD','YUGO');
make_d = new Array('MAKE','ANY MAKE','AC','AIXAM','ALFA ROMEO','ALVIS','ASIA','ASTON MARTIN','AUDI','AUSTIN','BENTLEY','BMW','BRISTOL','CADILLAC','CATERHAM','CHEVROLET','CHRYSLER','CITROEN','COLEMAN MILNE','DAEWOO','DAIHATSU','DAIMLER','DATSUN','DELOREAN','DODGE','FERRARI','FIAT','FORD','FSO','GINETTA','GMC','GRIFFON','HILLMAN','HMC','HONDA','HUMMER','HYUNDAI','ISO','ISUZU','JAGUAR','JEEP','JENSEN','KIA','LADA','LAMBORGHINI','LANCIA','LAND ROVER','LEXUS','LIGIER','LINCOLN','LOTUS','MARCOS','MASERATI','MAYBACH','MAZDA','MCLAREN','MERCEDES-BENZ','MG','MICROCAR','MINI','MITSUBISHI','MORGAN','MORRIS','NISSAN','NOBLE','OPEL','PAGANI','PANTHER','PERODUA','PEUGEOT','PONTIAC','PORSCHE','PROTON','RELIANT','RENAULT','RILEY','ROLLS-ROYCE','ROVER','SAAB','SAO','SEAT','SINGER','SKODA','SMART CAR','SSANGYONG','SUBARU','SUNBEAM','SUZUKI','TALBOT','TATA','TOYOTA','TRIUMPH','TVR','ULTIMA','VAUXHALL','VOLKSWAGEN','VOLVO','WESTFIELD','YUGO');
</script>
<select name="make" class="whiteforms" onChange="get_range(_modelїthis.selectedIndex]);">
<option value="0">---- Please Select -----</option>
</select>
<select name="model" class="whiteforms">
</select>
<script language="JavaScript">
var num=0; // number of times doLists has been called
var interval = null;
function doLists() {
num++;
if (num < 100) {
if (typeof get_makes == 'function' && typeof get_range =='function' && typeof _model=='object' && typeof make_v=='object' && typeof make_d=='object') {
get_makes();
get_range(_modelї0]);
clearInterval(interval);
}
}
else {
clearInterval(interval);
}
}
interval=setInterval("doLists()", 100);
</script>what am i missing? i thought id take the script as it is from auto trader and then make it dynamic but how come nothing appears in both select boxes.
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
maybe this code should be included...
http://www.autotrader.co.uk/common/_nav.js
just try to reproduce the code as precise as possible, uncluding their select menus....
http://www.autotrader.co.uk/common/_nav.js
just try to reproduce the code as precise as possible, uncluding their select menus....
THe form is trying to call the get_makes and get_range function which don't exist in your script.
they exist in the .js file http://www.autotrader.co.uk/common/dhtml.js
Mark
they exist in the .js file http://www.autotrader.co.uk/common/dhtml.js
Mark