Javascript：根據下拉列表的當前值顯示/隱藏行

Question

我在這種情況下使用Javascript和ASP。 當這個特定頁面打開時，我的一個下拉菜單已經填充了狀態“打開”或“已關閉” - 您可以看到該值來自我的記錄集中的ID。

我現在要做的是：如果首次加載時頁面上的狀態為“已關閉”，並且用戶決定將其更改為“打開”，則必須重新輸入“重新打開原因” - 這樣，在下拉列表下方顯示標題和文本框....

這是我到目前為止所嘗試的：我創建了一個showHide（）函數並將其放在下拉列表中的select中，但它沒有做任何事情，所以我現在卡住了。 任何幫助表示贊賞。 謝謝！

  <select name="cboStatus" id="cboStatus" style="width:200px" onchange="showHide();">                           <%
                        RSStatus.MoveFirst
                        If Not RSStatus.EOF Then
                            Do While Not RSStatus.EOF
                                %><option value='<%= RSStatus("ID")%>'
                                <%If RSStatus("ID") = RS("prjStatus") Then Response.Write "selected"%>><%= RSStatus("prjStatus")%></option><%
                                RSStatus.MoveNext
                            Loop
                        End If
                        %>           
                    </select>

應該從上面的JS生成的HTML：

<tr id="lbReopenReason" style="display:none">
                <td bordercolor="#f0f0e4" bgcolor="#f0f0e4"><h3>Reopen Reason</h3></td>
              </tr>
              <tr id="trReopenReason" style="display:none">
                <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
                <input name="txtReopenReason" type="text" id="txtReopenReason" value="<%If (RS("reOpenReason")) <> "" Then Response.Write(RS("reOpenReason"))%>" size="100" />
                </td>
              </tr>     

使用Javascript：

    function showHide()
        {
            var cboStatus = document.getElementById("cboStatus");
                  var cboStatusValue = cboStatus.options[cboStatus.selectedIndex].text;
            var lbReopenReason = document.getElementById("lbReopenReason");             var trReopenReason = document.getElementById("trReopenReason");         

            //If the status of the project is Closed at the time of page load, and that status changes, then the user must enter a re-open reason.
            if ( (status == 3) && (cboStatusvalue == 'Open' )
            {
                lbReopenReason.style.display = "";
                trReopenReason.style.display = "";
                }
                  else
{
                lbReopenReason.style.display = "none";
            trReopenReason.style.display = "none";
            }
    }  

Answer 1

看起來這里有兩個問題：

1）你的函數被稱為“statusShowHide（）”，而不是“showHide（）”，所以這可能是它沒有被調用的原因。 2）你的onchange屬性在函數調用之后缺少它的結束引號，因此也可以。

給這些修復一個鏡頭，看看它現在是否有效。

編輯：一些建議：

在你的showHide（）方法中，你說：

if ( (status == 3) && (cboStatusvalue == 'Open' )

應該是什么時候：

if ( (cboStatus === 3) && (cboStatusValue === 'Open' ) )

而且，而不是你當前獲得元素的價值的方式：

var cboStatusValue = cboStatus.options[cboStatus.selectedIndex].text;

嘗試使用：

var cboStatusValue = cboStatus.value;

Answer 2

最后用以下方法解決了這個問題：

窗口onload以填充初始記錄值：

window.onload = findStatus;

    function findStatus()   
    {
        var cboStatus = document.getElementById('cboStatus');
        statusShowHide(cboStatus);      
    }

接下來是這個Javascript改變狀態：

function statusShowHide(obj)
{   
    var txtStatusFirstLoad = document.getElementById("txtStatusFirstLoad");                  
    var lbReopenReason = document.getElementById("lbReopenReason");
    lbReopenReason.style.display = "none";

    if (txtStatusFirstLoad.value == 3 && obj.value == 1)
    {

        lbReopenReason.style.display = "block";
    }   
}

並添加了此隱藏文本框以捕獲初始狀態值：

<input name="txtStatusFirstLoad" id = "txtStatusFirstLoad" type="hidden" value="<%=RS("Status")%>" />