How to set drop down item as selected using jQuery/JS?

Question

I'm hoping someone can help with an issue I'm having. I'm working on a form which is being used on a web app we're developing. I've created a title field that when "other" is clicked - it will display another drop down menu (with other titles). My issue is once the form is saved, and we go back to edit the form, if "other" has been selected - it will not show the selected other title.

For example you are a Sir - we save the form - go back to the form to edit customer details - it will not show the selected title but if we save the form again - it still shows as Sir - so it is selecting it from the page, just not showing it visibly.

here is the snippet:

 function titlehandler(objName) { var titlefield = objName.value; document.patientDetailsForm.hiddentitle.value = titlefield; extratitleupdate(); } function extratitleupdate() { var titlevalue = document.patientDetailsForm.hiddentitle.value; if (titlevalue == "Other") { document.getElementById("othertitle").disabled = false; document.getElementById("othertitle").hidden = false; document.getElementById("other-label").style.display = 'none'; } else { document.getElementById("othertitle").disabled = true; document.getElementById("othertitle").hidden = true; document.getElementById("other-label").style.display = ''; } } 

 <form name="patientDetailsForm"> <fieldset class="title-box"> <span><input type="radio" name="title" value="Mr" onclick="titlehandler(this)" id="titlemr" th:field="*{title}" /> <label for="titlemr" id="mr-label">Mr</label></span> <span><input type="radio" name="title" value="Mrs" onclick="titlehandler(this)" id="titlemrs" th:field="*{title}" /> <label for="titlemrs" id="mrs-label">Mrs</label></span> <span><input type="radio" name="title" value="Miss" onclick="titlehandler(this)" id="titlemiss" th:field="*{title}" /> <label for="titlemiss" id="miss-label">Miss</label></span> <span><input type="radio" name="title" value="Ms" onclick="titlehandler(this)" id="titlems" th:field="*{title}" /> <label for="titlems" id="ms-label">Ms</label></span> <span><input type="radio" name="title" value="Other" onclick="titlehandler(this)" id="titleother" th:field="*{title}" /><label for="titleother" id="other-label">Other</label> <select name="name" class="multidrop" id="othertitle" disabled="" hidden="" th:field="*{title}"><option value="Dr">Dr</option> <option value="Rev">Rev</option> <option value="Sir">Sir</option> <option value="Sist">Sist</option></select> </span> <input type="hidden" name="hiddentitle" value="" /> <input type="hidden" name="valid" value="true" /> <input type="hidden" th:field="*{personId}" /> </fieldset> </form> 

Answer 1

You can use document.getElementById("othertitle").selectedIndex = "0"; to select first element of dropdown .

if you want to use jQuery , you can do something like :

$("#othertitle").val("Sir");

Here is working example :

 function titlehandler(objName) { var titlefield = objName.value; document.patientDetailsForm.hiddentitle.value = titlefield; extratitleupdate(); } function extratitleupdate() { var titlevalue = document.patientDetailsForm.hiddentitle.value; if (titlevalue == "Other") { document.getElementById("othertitle").disabled = false; document.getElementById("othertitle").hidden = false; document.getElementById("other-label").style.display = 'none'; } else { document.getElementById("othertitle").disabled = true; document.getElementById("othertitle").hidden = true; document.getElementById("other-label").style.display = ''; document.getElementById("othertitle").selectedIndex = "0"; } } 

 <form name="patientDetailsForm"> <fieldset class="title-box"> <span><input type="radio" name="title" value="Mr" onclick="titlehandler(this)" id="titlemr" th:field="*{title}" /> <label for="titlemr" id="mr-label">Mr</label></span> <span><input type="radio" name="title" value="Mrs" onclick="titlehandler(this)" id="titlemrs" th:field="*{title}" /> <label for="titlemrs" id="mrs-label">Mrs</label></span> <span><input type="radio" name="title" value="Miss" onclick="titlehandler(this)" id="titlemiss" th:field="*{title}" /> <label for="titlemiss" id="miss-label">Miss</label></span> <span><input type="radio" name="title" value="Ms" onclick="titlehandler(this)" id="titlems" th:field="*{title}" /> <label for="titlems" id="ms-label">Ms</label></span> <span><input type="radio" name="title" value="Other" onclick="titlehandler(this)" id="titleother" th:field="*{title}" /><label for="titleother" id="other-label">Other</label> <select name="name" class="multidrop" id="othertitle" disabled="" hidden="" th:field="*{title}"><option value="Dr">Dr</option> <option value="Rev">Rev</option> <option value="Sir">Sir</option> <option value="Sist">Sist</option></select> </span> <input type="hidden" name="hiddentitle" value="" /> <input type="hidden" name="valid" value="true" /> <input type="hidden" th:field="*{personId}" /> </fieldset> </form>