I have a unique selector that is designed like this:
<select id="patientSelector">
<option disabled selected style='display: none;' id="select0">
New Patients to Come</option>
<option id="select1"></option>
<option id="select2"></option>
</select>
In order to provide a placeholder text (i.e., the first option) for the selector, I decided on this format. Furthermore, with my customized javascript code, I aimed to achieve a functionality where if the chosen option was select1 and one clicked a button, it would be removed and revert back to displaying the disabled 'New Patients to Come' wording. Here's the javascript implementation:
$(".custom-btn").click(function(){
eliminate();
$('#patientSelector :selected').attr('selected', '0');
$('#patientSelector').change();
});
function eliminate(){
var y = document.getElementById("patientSelector");
y.remove(y.selectedIndex);
}
The issue is that when I try to run remove(), it inadvertently removes more than one option. So, if I were to get rid of "select2" and execute remove(), the list becomes an extensive blank listing. I sincerely appreciate any assistance offered, and please refrain from being too critical. :P
Edit Apologies for any confusion. Essentially, I want to ensure that the text 'New Patients to Come' (which serves as the initial option in my selector) is never eliminated, regardless of how many times the 'function remove()' is executed. While it can effectively delete the other options, it should always retain the first one. I am uncertain if this is even feasible... If there exists an alternative method to incorporate text into a selector without relying on options, it would be acceptable as well :-)
Perhaps something like:
function eliminate(){
if(option != 1){
var y = document.getElementById("patientSelector");
y.remove(y.selectedIndex);
}
}