我有这个 jsp 页面,如果您单击单选按钮,则一小部分应该变得不可见,并且选择列表中的选项应该发生更改。
<center>
<span class="ReportSubsectionTitle">Report Type</span>
<br />
<html:radio styleId="detail" property="reportOutputStyleID" onclick="doSummary();" value="1" />Pending Funding
<html:radio styleId="summary" property="reportOutputStyleID" onclick="doDetail();" value="2" />Previously Funded
</center>
<script>
function doDetail(){
document.getElementById("narrowByDateRangeTop").checked = false;
document.getElementById("narrowByDateRangeBottom").checked = false;
document.getElementById("narrowByDateRangeTop").disabled = true;
document.getElementById("narrowByDateRangeBottom").disabled = true;
document.getElementById("dateRangeTypeID").disabled = true;
document.getElementById("dateRangeLabel").disabled = true;
document.getElementById("startDateStr").disabled = true;
document.getElementById("startDateLabel").disabled = true;
document.getElementById("startDateCalendarTrigger").disabled = true;
document.getElementById("endDateStr").disabled = true;
document.getElementById("endDateLabel").disabled = true;
document.getElementById("endDateCalendarTrigger").disabled = true;
document.getElementById("startDateTime").disabled = true;
document.getElementById("endDateTime").disabled = true;
document.getElementById("narrowByDateRangeTop").style.visibility = "hidden";
document.getElementById("narrowByDateRangeBottom").style.visibility = "hidden";
document.getElementById("dateRangeTypeID").style.visibility = "hidden";
document.getElementById("dateRangeLabel").style.visibility = "hidden";
document.getElementById("startDateStr").style.visibility = "hidden";
document.getElementById("startDateLabel").style.visibility = "hidden";
document.getElementById("startDateCalendarTrigger").style.visibility = "hidden";
document.getElementById("endDateStr").style.visibility = "hidden";
document.getElementById("endDateLabel").style.visibility = "hidden";
document.getElementById("endDateCalendarTrigger").style.visibility = "hidden";
document.getElementById("startDateTime").style.visibility = "hidden";
document.getElementById("endDateTime").style.visibility = "hidden";
document.getElementById("DateSelection").style.visibility = "hidden";
}
function doSummary(){
document.getElementById("narrowByDateRangeTop").checked = true;
document.getElementById("narrowByDateRangeBottom").checked = false;
document.getElementById("narrowByDateRangeTop").disabled = false;
document.getElementById("narrowByDateRangeBottom").disabled = false;
document.getElementById("dateRangeTypeID").disabled = false;
document.getElementById("dateRangeLabel").disabled = false;
document.getElementById("startDateStr").disabled = false;
document.getElementById("startDateLabel").disabled = false;
document.getElementById("startDateCalendarTrigger").disabled = false;
document.getElementById("endDateStr").disabled = false;
document.getElementById("endDateLabel").disabled = false;
document.getElementById("endDateCalendarTrigger").disabled = false;
document.getElementById("startDateTime").disabled = false;
document.getElementById("endDateTime").disabled = false;
document.getElementById("narrowByDateRangeTop").style.visibility = "visible";
document.getElementById("narrowByDateRangeBottom").style.visibility = "visible";
document.getElementById("dateRangeTypeID").style.visibility = "visible";
document.getElementById("dateRangeLabel").style.visibility = "visible";
document.getElementById("startDateStr").style.visibility = "visible";
document.getElementById("startDateLabel").style.visibility = "visible";
document.getElementById("startDateCalendarTrigger").style.visibility = "visible";
document.getElementById("endDateStr").style.visibility = "visible";
document.getElementById("endDateLabel").style.visibility = "visible";
document.getElementById("endDateCalendarTrigger").style.visibility = "visible";
document.getElementById("startDateTime").style.visibility = "visible";
document.getElementById("endDateTime").style.visibility = "visible";
document.getElementById("DateSelection").style.visibility = "visible";
}
</script>
然后,我将此小节标记为“日期选择”,我想使其不可见:
<tr>
<td align="center" style="padding-bottom: 5px;">
<span id = "DateSelection" class="ReportSubsectionTitle">Date Selection</span>
</td>
<td align="center" style="padding-bottom: 5px;">
<span class="ReportSubsectionTitle">Save Generated Report?</span>
</td>
</tr>
<tr>
<td valign="top" nowrap="nowrap">
<%@ include file="dateSelectionSection1.jsp" %>
</td>
<td valign="top" nowrap="nowrap" style="padding-left: 10px;">
<%@ include file="savedReportNameField.jsp" %>
</td>
</tr>
我有一个选择列表
<span style="padding-left: 5px;">
Date Type:
<html:select property="dateTypeID">
<html:options collection="dateTypes" property="id" labelProperty="name"/>
</html:select>
</span>
我尝试将 id 添加到选择中,但出现错误,提示找不到标签。我想更改下拉菜单下的选择并锁定选择。
我尝试了 document.getElementById("dateTypeID").options[0].selected = 1。但是,此后没有任何变化。
我是 JSP 新手,不太确定如何处理这个问题。
最佳答案
假设这是您的选择语句:
<select name="master" size="1">
<option value="newsvalue">News</option>
<option value="webmastervalue">Webmaster</option>
<option value="techvalue">Tech</option>
</select>
在用户勾选单选按钮后调用的 JavaScript 函数中,您首先从 selectList 中删除所有选项,如下所示:
document.myform.master.options.length=0;
然后您重新填充 selectList,执行如下操作:
document.myform.master.options[0]=new Option("Sports", "sportsvalue", true, false);
document.myform.master.options[1]=new Option("Music", "musicvalue", false, false);
document.myform.master.options[2]=new Option("Movies", "moviesvalue", false, false);
“new Option()”函数的数据类型是:
new Option(text, value, defaultSelected, selected);
因此 JSP 中的处理方式与 HTML 页面中的处理方式并没有什么不同。希望您发现这很有用:-)
关于javascript - 如何使用javascript更改选择列表jsp中的选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10855463/