如何使用javascript在選擇列表jsp中更改選項？

我有這個jsp頁面，如果你點擊一個單選按鈕，一個小節應該變得不可見，並且選擇列表中的選項應該改變。如何使用javascript在選擇列表jsp中更改選項？

<center> 
    <span class="ReportSubsectionTitle">Report Type</span> 
            <br /> 
<html:radio styleId="detail" property="reportOutputStyleID" onclick="doSummary();" value="1" />Pending Funding 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<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>

然後，我本款標有「擇日」，我想使invisble：

<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新手，不太清楚如何處理這個問題。

來源

2012-06-01 roymustang86

說這是你的SELECT語句：

<select name="master" size="1"> 
    <option value="newsvalue">News</option> 
    <option value="webmastervalue">Webmaster</option> 
    <option value="techvalue">Tech</option> 
</select>

在你的JavaScript函數，獲取用戶後叫蜱的單選按鈕，您先刪除從選擇列表的所有選項，如下所示：

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(text, value, defaultSelected, selected);

所以這沒有得到處理在JSP會比在一個HTML頁面反正不同。希望你找到這個有用的:-)

來源

2012-06-02 08:00:03 Tiwaz89

如何使用javascript在選擇列表jsp中更改選項？

回答

相關問題