javascript - 如何使用 jQuery/JS 将下拉项设置为选中状态？

Question

我希望有人可以帮助解决我遇到的问题。我正在开发一个表单，该表单正在我们正在开发的网络应用程序上使用。我创建了一个标题字段，当单击“其他”时，它将显示另一个下拉菜单(带有其他标题)。我的问题是一旦保存表单，我们返回编辑表单，如果选择了“其他” - 它不会显示所选的其他标题。

例如，您是先生 - 我们保存表单 - 返回表单编辑客户详细信息 - 它不会显示所选的标题，但如果我们再次保存表单 - 它仍然显示为先生 - 所以它正在选择它来自页面，只是不明显地显示它。

这是片段:

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

您可以使用document.getElementById("othertitle").selectedIndex = "0";来选择下拉列表的第一个元素。

如果你想使用 jQuery ，你可以这样做:

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

这是工作示例:

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>