I have these drop down menus in HTML and I want to get the name of the doctor and department in JavaScript so i can update it to firebase. This is the code i used for that. But this just returns null in the realtime database. I have also used this function to link the two drop down menus. Can someone please tell me how I can get the doctor name and department name inside the variables?
let dept_index = document.getElementById("myDept").selectedIndex;
let dept_sel = document.getElementById('myDept').options;
var dept = dept_sel[dept_index].text;
let doc = document.querySelector('#myDocs').name;
function myFunction(dept) {
var list2 = document.getElementById("myDocs");
if (dept.value == 'dept_1') {
list2.options.length = 0;
list2.options[0] = new Option('Maimoona Siddiqui', 'dept_1');
list2.options[1] = new Option('Zafar Iqbal', 'dept_1');
} else if (dept.value == 'dept_2') {
list2.options.length = 0;
list2.options[0] = new Option('Arsalan Ahmed', 'dept_2');
list2.options[1] = new Option('Humera Naeem', 'dept_2');
} else if (dept.value == 'dept_3') {
list2.options.length = 0;
list2.options[0] = new Option('Ghazala Mehmood', 'dept_3');
list2.options[1] = new Option('Hira Asim', 'dept_3');
list2.options[2] = new Option('Shazia Fakhar', 'dept_3');
} else if (dept.value == 'dept_4') {
list2.options.length = 0;
list2.options[0] = new Option('Mohammad Amin', 'dept_4');
list2.options[1] = new Option('Muhammad Ali Afridi', 'dept_4');
} else if (dept.value == 'dept_5') {
list2.options.length = 0;
list2.options[0] = new Option('Asif Masood', 'dept_5');
list2.options[1] = new Option('Huma Tasleem', 'dept_5');
} else if (dept.value == 'dept_6') {
list2.options.length = 0;
list2.options[0] = new Option('Azhar Shafi', 'dept_6');
list2.options[1] = new Option('Muhammad Farhan Khan', 'dept_6');
list2.options[2] = new Option('Shayan Shahid', 'dept_6');
} else {
list2.options.length = 0;
list2.options[0] = new Option('Maimoona Siddiqui', 'dept_1');
list2.options[1] = new Option('Zafar Iqbal', 'dept_1');
}
}<div class="info">
<input id="firstname" type="text" name="firstname" maxlength="15" pattern="[A-Za-z]{1,15}" placeholder="First name" required>
<input id="middlename" type="text" name="middlename" maxlength="15" pattern="[A-Za-z]{1,15}" placeholder="Middle name">
<input id="lastname" type="text" name="lastname" maxlength="15" pattern="[A-Za-z]{1,15}" placeholder="Last name" required>
<input id="mobile_number" type="text" pattern="03[0-9]{2}(?!1234567)(?!1111111)(?!7654321)[0-9]{7}" name="mobile_number" placeholder="Phone number (Format :03xxxxxxxxx)" required>
<input type="text" name="mrnum" id="mrnum" placeholder="MR Number">
<select class="ui scrolling dropdown" id="myDept" onchange="myFunction(this)">
<option name="Allergy" value="dept_1">Allergy</option>
<option name="ENT" value="dept_2">ENT</option>
<option name="Gynaecology" value="dept_3">Gynaecology</option>
<option name="Oncology" value="dept_4">Oncology</option>
<option name="Ophthalmology" value="dept_5">Ophthalmology</option>
<option name="Rheumatology" value="dept_6">Rheumatology</option>
</select>
<select class="ui scrolling dropdown" id="myDocs">
<option name="Asif Masood" value="dept_5">Asif Masood</option>
<option name="Ghazala Mehmood" value="dept_3">Ghazala Mehmood</option>
<option name="Mohammad Amin" value="dept_4">Mohammad Amin</option>
<option name="Arsalan Ahmed" value="dept_2">Arsalan Ahmed</option>
<option name="Azhar Shafi" value="dept_6">Azhar Shafi</option>
<option name="Hira Asim" value="dept_3">Hira Asim</option>
<option name="Huma Tasleem" value="dept_5">Huma Tasleem</option>
<option name="Humera Naeem" value="dept_2">Humera Naeem</option>
<option name="Maimoona Siddiqui" value="dept_1">Maimoona Siddiqui</option>
<option name="Muhammad Ali Afridi" value="dept_4">Muhammad Ali Afridi</option>
<option name="Muhammad Farhan Khan" value="dept_6">Muhammad Farhan Khan </option>
<option name="Shayan Shahid" value="dept_6">Shayan Shahid</option>
<option name="Shazia Fakhar" value="dept_3">Shazia Fakhar</option>
<option name="Zafar Iqbal" value="dept_1">Zafar Iqbal</option>
</select>
</div>
