How to get value of 2 dropdown list who’s value coming from javascript function

I have 2 dropdownlist in jsp as ‘speciality’ and ‘super_speciality'[clicking on speciality related superspeciality populates] and their values coming from javascript file ‘specialities.js’, how to get values of these 2 dropdownlist in Servlet or JSP ???

my

// specialities.js file

// speciaities
var spl_arr = new Array("Dentist","Gynecologist/obstetrician","Dermatologist/cosmetologist",
								"Pediatrician","General Physician","Ayurveda","Cardiologist",
								"Orthopedist","Ear-nose-throat (ent)","Homeopath");

//  Super Specialities
var SupSpl_arr = new Array();

SupSpl_arr[0]="";
SupSpl_arr[1]="General Dentists|Oral Pathologists|Periodontists|Orthodontists|Cosmetic Dentists|";
SupSpl_arr[2]="Maternal-fetal medicine|Family planning|Reproductive endocrinology and infertility|Female pelvic medicine and reconstructive surgery|Menopausal and geriatric |";
SupSpl_arr[3]="Cosmecaregiver|Desairologist|Hair colorist|Esthecaregiver|";
SupSpl_arr[4]="Fictional pediatricians‎|Neonatologists‎|Pediatric ophthalmologists‎|Pediatric organizations|Women pediatricians|";
SupSpl_arr[5]="Auto-isopathy|Classical homeopathy|Clinical homeopathy|Homotoxicology|Pluralistic homeopathy|";
SupSpl_arr[6]="Multiple Sclerosis (MS)|Parkinson’s disease (PD)|Ankylosing Spondylities (AS)|Rheumatoid arthritis (RA)|Paralysis|";
SupSpl_arr[7]="Cardiac electrophysiology|Echocardiography|Interventional cardiolog|Nuclear cardiology|Pediatric cardiology|";
SupSpl_arr[8]="Hand and Plastic Surgery|Pediatric Orthopaedics|Back and spine conditions|Trauma|";
SupSpl_arr[9]="OTOLOGY-NEUROTOLOGY (EAR)|RHINOLOGY (NOSE)|LARYNGOLOGY (THROAT)|HEAD/NECK/THYROID|ALLERGY|GENERAL OTOLARYNGOLOGY|PEDIATRIC OTOLARYNGOLOGY (CHILDREN)|";
SupSpl_arr[10]="Allergy and Immunology|Anaesthesiology|Endocrinology|Gastroenterology|";



function populateSuperSpecialities( specialityElementId, superSpecialityElementId ){
	
	var selectedSpecialityIndex = document.getElementById( specialityElementId ).selectedIndex;

	var superSpecialityElement = document.getElementById( superSpecialityElementId );
	
	superSpecialityElement.length=0;	// Fixed by Julian Woods
	superSpecialityElement.options[0] = new Option('Select Super Speciality','');
	superSpecialityElement.selectedIndex = 0;
	
	var super_arr = SupSpl_arr[selectedSpecialityIndex].split("|");
	
	for (var i=0; i<super_arr.length; i++) {
		superSpecialityElement.options[superSpecialityElement.length] = new Option(super_arr[i],super_arr[i]);
	}
}

function populateSpecialities(specialityElementId, superSpecialityElementId){
	// given the id of the <select> tag as function argument, it inserts <option> tags
	var specialityElement = document.getElementById(specialityElementId);
	specialityElement.length=0;
	specialityElement.options[0] = new Option('Select Speciality','-1');
	specialityElement.selectedIndex = 0;
	for (var i=0; i<spl_arr.length; i++) {
		specialityElement.options[specialityElement.length] = new Option(spl_arr[i],spl_arr[i]);
	}

	// Assigned all countries. Now assign event listener for the states.

	if( superSpecialityElementId ){
		specialityElement.onchange = function(){
			populateSuperSpecialities( specialityElementId, superSpecialityElementId );
		};
	}
}
// inside my jsp  
<script type= "text/javascript" src = "js/specialities.js"></script>


Select Speciality: <select id="speciality" name="speciality">
			<script language="javascript">
				populateSpecialities("speciality", "super_speciality");
			</script>
		</select>
	Select Super-Speciality: <select id="super_speciality" name="super_speciality"  style="width: 198px">
		<script language="javascript">
					populateSuperSpecialities("speciality", "super_speciality");					
		</script>		
	</select>


Source: jsp

Leave a Reply