Page 1 of 1

select box problem

Posted: Tue Sep 16, 2003 8:53 am
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.

Posted: Tue Sep 16, 2003 9:34 am
by SantaGhost
try the client side forum or a specific javascript forum on the web, sounds like something only IE supports :)

Posted: Tue Sep 16, 2003 9:36 am
by gurjit
been looking for ages now....cant find nothing useful. i was hoping someone had done something similar....any programing buffs done this?

Posted: Tue Sep 16, 2003 9:42 am
by SantaGhost

Posted: Tue Sep 16, 2003 9:51 am
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.

Posted: Tue Sep 16, 2003 9:55 am
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;

Posted: Tue Sep 16, 2003 10:09 am
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....

Posted: Tue Sep 16, 2003 10:10 am
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

Posted: Tue Sep 16, 2003 10:18 am
by SantaGhost
smart thing with the visibility hidden :D looks like youre saved gurjit

Posted: Tue Sep 16, 2003 10:38 am
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.

Posted: Tue Sep 16, 2003 10:43 am
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....

Posted: Tue Sep 16, 2003 11:05 am
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

Posted: Tue Sep 16, 2003 11:08 am
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.