0

I am currently querying data (with an api call) into a select list and creates a dropdown list. It renders the data however, I want a default value of "--Make a Selection--". I tried adding an option tag but gets overridden by the post query. Any ideas/solutions that my fix my issue?

<body onload="getPatients()">
    <div id="message"></div>
    <p class="title">Select a patient</p>
    <select name="patients" id="patientList" required>
        <option selected>--Make a Selection--</option>

    </select>

I tried adding an option tag within the select to make it the default but as I stated earlier, the dropdown post query overrides the option tag.

Any help would be appreciated. Thank you.

The following is the getPatients call.

async function getPatients() {
    console.log("all good");
var patientEl = document.getElementById("patientList");
console.log("still good");
//first fetch all of the patients from the patients table. 
let patientReq = await fetch("https://api.quickbase.com/v1/records/query",
{
    method: 'POST',
    headers: headers,
    body: jbody
}).catch(err =>{console.log(err)});
let jsonpatients = await patientReq.json();
//console.log(patients);
//Ok now we have all the patients from the application. 
//now take your json response and put it into your render function 

    renderPatients(jsonpatients);
}
John Lee
  • 1
  • 1
  • The problem is in the `getPatients()` function that you didn't show in the question. It shouldn't override the `selected` attribute. – Barmar May 24 '23 at 20:20
  • There isn't enough information to tell exactly what is causing the problem. Is your default option being erased after the API call or is it still in the list but no longer selected? If it's the former then something in renderPatients() - or something it subsequently calls - is replacing the contents of your select element. If it's the latter, then something is appending the contents but updating which option is selected. Either way, sharing the code for renderPatients() would help. – Nathan Hawe May 25 '23 at 22:39

1 Answers1

0

Add this line above renderpatients(jsonpatients):

jsonpatients.unshift("--Make a Selection--");

This adds this element to beginning of the array, so it shows first in the drop down, which I'm assuming you want for UX. You can also remove the option tag as it wont be needed.

Erich Wehrmann
  • 464
  • 2
  • 11