Question

我希望有人可以帮助解决我遇到的问题。我正在处理我们正在开发的网络应用上使用的表单。我创建了一个标题字段，当＆＃34;其他＆＃34;单击 - 它将显示另一个下拉菜单（包含其他标题）。我的问题是一旦表单被保存，我们就回去编辑表单，如果＆＃34;其他＆＃34;已被选中 - 它不会显示所选的其他标题。

例如，您是一名爵士 - 我们保存表单 - 返回表单编辑客户详细信息 - 它不会显示所选标题，但如果我们再次保存表单 - 它仍然显示为Sir - 所以它选择它来自页面，只是没有明显地显示出来。

这是片段：

＆＃13;

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 = '';
}
}

＆＃13;

<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>

＆＃13;

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>

如何使用jQuery / JS设置下拉项目？

1 个答案: