select box problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

select box problem

Post by gurjit »

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.
User avatar
SantaGhost
Forum Commoner
Posts: 41
Joined: Mon Sep 15, 2003 11:54 am

Post by SantaGhost »

try the client side forum or a specific javascript forum on the web, sounds like something only IE supports :)
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

Post by gurjit »

been looking for ages now....cant find nothing useful. i was hoping someone had done something similar....any programing buffs done this?
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

Post by gurjit »

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.
User avatar
SantaGhost
Forum Commoner
Posts: 41
Joined: Mon Sep 15, 2003 11:54 am

Post by SantaGhost »

then try something like this (with some ajustments, just typed it out)

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()&#123;
box.2.innerHTML = "<option value="2">Doe</option>";
&#125;
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

Post by gurjit »

i tried this but it didnt work....can you see why?

Code: Select all

<script>
function change_box2()&#123; 
cc.4.innerHTML = "<option value="2">Doe</option>"; 
&#125;
</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)) 
			&#123; 
			$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&#1111;'wsid']; 
			$wsv2 = $get_website_section_create&#1111;'ws_name'];
			?>     
			<option value="<?php echo $wsv1 ?>"><?php echo $wsv2; ?></option> 
			<?php &#125; //close loop (list($key,$value) = each($frn_wsid))  ?>          
              </select>




<select name="f_reference" class="whiteforms">
               
              </select>
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....
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

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
User avatar
SantaGhost
Forum Commoner
Posts: 41
Joined: Mon Sep 15, 2003 11:54 am

Post by SantaGhost »

smart thing with the visibility hidden :D looks like youre saved gurjit
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

Post by gurjit »

ok people i done this and nothing showed in the menu bar why?

Code: Select all

<script language="JavaScript">
_model = new Array(); 
_model&#1111;0] = new Array('MODEL','ANY MODEL');
_model&#1111;1] = new Array('MODEL','ANY MODEL');
_model&#1111;2] = new Array('ANY','ACE','COBRA','SUPERBLOWER');
_model&#1111;3] = new Array('ANY','400','500');
_model&#1111;4] = new Array('ANY','145','146','147','155','156','164','166','33','75','ALFASUD','GIULIETTA','GTV','SPIDER','SPORTWAGON','SPRINT','SZ');
_model&#1111;5] = new Array('ANY','TD21');
_model&#1111;6] = new Array('ANY','ROCSTA');
_model&#1111;7] = new Array('ANY','DB2','DB4','DB5','DB6','DB7','DBS','LAGONDA','V8','VANQUISH','VANTAGE','VIRAGE','VOLANTE');
_model&#1111;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&#1111;9] = new Array('ANY','ALLEGRO','BEACONSFIELD','HEALEY','MAESTRO','MAXI','METRO','MINI','MONTEGO','PRINCESS');
_model&#1111;10] = new Array('ANY','ARNAGE','AZURE','BROOKLANDS','CONTINENTAL','CORNICHE','EIGHT','MULSANNE','SERIES II','T SERIES','TURBO R');
_model&#1111;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&#1111;12] = new Array('ANY','411','412','BLENHEIM');
_model&#1111;13] = new Array('ANY','BROUGHAM','ELDORADO','ESCALADE','FLEETWOOD','SEVILLE');
_model&#1111;14] = new Array('ANY','SUPER SEVEN','SUPER SPRINT');
_model&#1111;15] = new Array('ANY','210','ASTRO','BLAZER','CAMARO','CORVETTE','GMC','S10','SILVERADO','SUBURBAN','TAHOE');
_model&#1111;16] = new Array('ANY','CHEROKEE','GRAND CHEROKEE','GRAND VOYAGER','JEEP','NEON','PT CRUISER','SEBRING','VIPER','VOYAGER','WRANGLER');
_model&#1111;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&#1111;18] = new Array('ANY','DORCHESTER');
_model&#1111;19] = new Array('ANY','ESPERO','KALOS','KORANDO','LANOS','LEGANZA','MATIZ','MUSSO','NEXIA','NUBIRA','TACUMA');
_model&#1111;20] = new Array('ANY','APPLAUSE','CHARADE','COPEN','CUORE','DOMINO','FOURTRAK','GRAND MOVE','HIJET','MIRA','MOVE','SIRION','SPORTRAK','TERIOS','YRV');
_model&#1111;21] = new Array('ANY','DOUBLE SIX','EMPRESS','LIMOUSINE','SALOON','SOVEREIGN','SUPER V8','V8','XJ SERIES','XJ12');
_model&#1111;22] = new Array('ANY','PATROL');
_model&#1111;23] = new Array('ANY','DMZ');
_model&#1111;24] = new Array('ANY','DAKOTA','DURANGO','RAM','VIPER');
_model&#1111;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&#1111;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&#1111;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&#1111;28] = new Array('ANY','CARO');
_model&#1111;29] = new Array('ANY','G SERIES');
_model&#1111;30] = new Array('ANY','ANY');
_model&#1111;31] = new Array('ANY','110');
_model&#1111;32] = new Array('ANY','IMP','MINX');
_model&#1111;33] = new Array('ANY','MK IV SE');
_model&#1111;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&#1111;35] = new Array('ANY','H2');
_model&#1111;36] = new Array('ANY','ACCENT','AMICA','ATOZ','COUPE','ELANTRA','GETZ','LANTRA','MATRIX','PONY','S-COUPE','SANTA FE','SONATA','STELLAR','TRAJET','X2','XG30');
_model&#1111;37] = new Array('ANY','LELE');
_model&#1111;38] = new Array('ANY','PIAZZA','TF','TROOPER');
_model&#1111;39] = new Array('ANY','E-TYPE','MARK I','MARK II','S-TYPE','SOVEREIGN','V8','X-TYPE','XJ SERIES','XJS','XK');
_model&#1111;40] = new Array('ANY','CHEROKEE','GRAND CHEROKEE','RENEGADE','WRANGLER');
_model&#1111;41] = new Array('ANY','INTERCEPTOR','S-V8');
_model&#1111;42] = new Array('ANY','CARENS','CLARUS','MAGENTIS','MENTOR','PRIDE','RIO','SEDONA','SHUMA','SORENTO','SPORTAGE');
_model&#1111;43] = new Array('ANY','1500','NIVA','RIVA','SAMARA');
_model&#1111;44] = new Array('ANY','COUNTACH','DIABLO','LM','MURCIELAGO','URRACO');
_model&#1111;45] = new Array('ANY','BETA','DEDRA','DELTA','MONTE CARLO','PRISMA','THEMA','Y10');
_model&#1111;46] = new Array('ANY','DEFENDER','DISCOVERY','FREELANDER','LIGHTWEIGHT','RANGE ROVER','SERIES II','SERIES III');
_model&#1111;47] = new Array('ANY','GS','IS','LS','RX','SC','SOARER');
_model&#1111;48] = new Array('ANY','AMBRA');
_model&#1111;49] = new Array('ANY','BLACKWOOD','NAVIGATOR','TOWN CAR');
_model&#1111;50] = new Array('ANY','340R','CARLTON','ECLAT','ELAN','ELISE','ELITE','ESPRIT','EXCEL','EXIGE','XI');
_model&#1111;51] = new Array('ANY','LM','MANTARA','MANTARAY','MANTIS','MANTULA','MARTINA');
_model&#1111;52] = new Array('ANY','222','320','3200','BITURBO','CONVERTIBLE','GHIBLI','KARIF','QUATTROPORTE','SPYDER');
_model&#1111;53] = new Array('ANY','57','62');
_model&#1111;54] = new Array('ANY','121','323','626','DEMIO','EUNOS','MAZDA2','MAZDA6','MPV','MX-3','MX-5','MX-6','PREMACY','RX7','TRIBUTE','XEDOS');
_model&#1111;55] = new Array('ANY','M6');
_model&#1111;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&#1111;57] = new Array('ANY','MAESTRO','MAGNETTE','METRO','MGA','MGB','MGF','MIDGET','MONTEGO','ROADSTER','RV8','TD','TF','ZR','ZS','ZT');
_model&#1111;58] = new Array('ANY','VIRGO');
_model&#1111;59] = new Array('ANY','COOPER','MINI','ONE');
_model&#1111;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&#1111;61] = new Array('ANY','4/4','AERO','PLUS 4','PLUS 8');
_model&#1111;62] = new Array('ANY','ITAL','MINI','MINOR');
_model&#1111;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&#1111;64] = new Array('ANY','M12');
_model&#1111;65] = new Array('ANY','COMMODORE','KADETT','MANTA','MONZA','OMEGA','ZAFIRA');
_model&#1111;66] = new Array('ANY','ZONDA');
_model&#1111;67] = new Array('ANY','KALLISTA');
_model&#1111;68] = new Array('ANY','KELISA','KENARI','NIPPA');
_model&#1111;69] = new Array('ANY','104','106','205','206','305','306','307','309','405','406','504','505','605','607','806','807','PARTNER COMBI');
_model&#1111;70] = new Array('ANY','FIREBIRD','TRANS AM');
_model&#1111;71] = new Array('ANY','356','911','912','924','928','944','968','BOXSTER','CARRERA GT','CAYENNE');
_model&#1111;72] = new Array('ANY','COMPACT','COUPE','GL','GLS','IMPIAN','PERSONA','PROTON','SATRIA','WIRA');
_model&#1111;73] = new Array('ANY','RIALTO','ROBIN','SABRE','SCIMITAR');
_model&#1111;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&#1111;75] = new Array('ANY','ELF','RM SERIES');
_model&#1111;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&#1111;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&#1111;78] = new Array('ANY','9-3','9-5','90','900','9000','96','99');
_model&#1111;79] = new Array('ANY','PENZA');
_model&#1111;80] = new Array('ANY','ALHAMBRA','AROSA','CORDOBA','IBIZA','LEON','MALAGA','MARBELLA','TOLEDO','VARIO');
_model&#1111;81] = new Array('ANY','GAZELLE');
_model&#1111;82] = new Array('ANY','FABIA','FAVORIT','FELICIA','OCTAVIA','SUPERB');
_model&#1111;83] = new Array('ANY','CAR','CDI','CITY-COUPE','EDITION','PASSION','PULSE','PURE');
_model&#1111;84] = new Array('ANY','KORANDO','MUSSO');
_model&#1111;85] = new Array('ANY','1600','1800','FORESTER','IMPREZA','JUSTY','LEGACY','SVX','VIVIO','XT');
_model&#1111;86] = new Array('ANY','ALPINE');
_model&#1111;87] = new Array('ANY','ALTO','BALENO','CAPPUCCINO','GRAND VITARA','IGNIS','JIMNY','LIANA','SAMURAI','SJ','SWIFT','VITARA','WAGON R','X-90');
_model&#1111;88] = new Array('ANY','ALPINE','BA75','HORIZON','SAMBA','SOLARA','SUNBEAM');
_model&#1111;89] = new Array('ANY','SAFARI');
_model&#1111;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&#1111;91] = new Array('ANY','DOLOMITE','SPITFIRE','STAG','TOLEDO','TR4','TR6','TR7','TR8');
_model&#1111;92] = new Array('ANY','280I','3000M','350I','450','CERBERA','CHIMAERA','GRIFFITH','S CONVERTIBLE','S2','S3','T350','TAIMAR','TAMORA','TASMIN','TUSCAN');
_model&#1111;93] = new Array('ANY','SPORT','SPYDER');
_model&#1111;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&#1111;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&#1111;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&#1111;97] = new Array('ANY','1600','1800','7','MEGA','MEGABIRD','MEGABLADE','SEI');
_model&#1111;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&#1111;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()  &#123;
	num++;
	if (num < 100)  &#123;
		if (typeof get_makes == 'function' && typeof get_range =='function' && typeof _model=='object' && typeof make_v=='object' && typeof make_d=='object')  &#123;
			get_makes();
			get_range(_model&#1111;0]);
			clearInterval(interval);
		&#125;
	&#125;
	else &#123;
		clearInterval(interval);
	&#125;
&#125;
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.
User avatar
SantaGhost
Forum Commoner
Posts: 41
Joined: Mon Sep 15, 2003 11:54 am

Post by SantaGhost »

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....
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

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
User avatar
gurjit
Forum Contributor
Posts: 314
Joined: Thu May 15, 2003 11:53 am
Location: UK

Post by gurjit »

cheers to both of you....i've got the menu working according to the way autotrader do it....now i have to just create the values i want from my database. should be ok from here.

many thanks with out you two i was lost.....many thanks.
Post Reply