Question

我目前正在尝试的代码是我有一个下拉框，这是一个必需的下拉列表。如果从该下拉框中选择“完成”，则会出现一个文本框。如果从该下拉框中选择“放弃”，则会出现第二个下拉框，其中包含其他选项。

我尝试在选择第一个下拉列表后将验证添加到第二个选项。在我的代码中，我将第一个下拉框“ActionDD”标记为必填字段。但我不能用文本框“REMtextBox”或“ReasonDD”下拉框来做到这一点，因为它们永远不会同时出现。

以下是我的表单的代码

<form name=StudentForm action="javascript:window.close();">   
<div class="DDbox">
<select name="Action" id="ActionDD" required onchange="showHide()">
    <option value="">Action:</option>
    <option value="complete">Complete</option>
    <option value="abandon">Abandon</option>
    <option value="transfer">Transfer</option>
</select>
</div>
<br>
<div class="COMPLETEbox" id="COMPLETEbox" >
    <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;"/><br>

<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
    <option value="">Reason:</option>
    <option value="NoShow">No Show</option>
    <option value="Unfixable">Unfixable</option>
    <option value="other">Other</option>
</select><br><br>
    <br>
  <input type="submit" value="submit" onclick="checkform();">
</div>
</form>

然后，这里是我一直在处理JavaScript的代码，以便在按下Submit按钮时检查条件。

 function checkform() {
    if (document.getElementById('ActionDD').value ="abandon" && (document.getElementById('ReasonDD').value =""))
        {
            validationMessage = validationMessage + 'Enter Reason';
            valid = false;
        }
        else valid = true;
}
</script>

我正在寻找一个解决方案，用于检查第一个下拉列表是否选择了值，然后在第一个下拉列表中选择的任何相应的文本框或下拉列表中选择了一个值。

提前感谢您的帮助。

Answer 1

尝试以下代码。想法是设置/删除所需的＆＃39;在更改ActionDD下拉列表期间的属性。希望它有所帮助。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML code with text-boxes and drop-downs</title>

    <script type="text/javascript">

        var actionBox,
            reasonBox,
            completeBox,
            remTextBox,
            selectedAction,
            isFormValid, 
            validationMessage = "Not all required fields are filled in; ";

        function init() {
            actionBox = document.getElementById('ActionDD');
            reasonBox = document.getElementById('ReasonDD');
            completeBox = document.getElementById('COMPLETEbox');
            remTextBox = document.getElementById('REMtextBox');
            selectedAction = actionBox.value;

            remTextBox.style.display = 'none';
            remTextBox.removeAttribute("required");

            reasonBox.style.display = 'none';
            reasonBox.removeAttribute("required");

            isFormValid = false;
        }

        function checkform() {
            // Include other logic if needed here...
        }

        function showHide() {
            init();

            if (selectedAction == 'complete') {
                remTextBox.style.display = 'block';
                remTextBox.setAttribute("required", "required");
            }
            else if (selectedAction == 'abandon') {
                reasonBox.style.display = 'block';
                reasonBox.setAttribute("required", "required");
            }
        }
    </script>

    <style>
    </style>
</head>
<body>
    <form name="StudentForm">
        <div class="DDbox">
            <select name="Action" id="ActionDD" required onchange="showHide()">
                <option value="">Action:</option>
                <option value="complete">Complete</option>
                <option value="abandon">Abandon</option>
                <option value="transfer">Transfer</option>
            </select>
        </div>
        <br>
        <div class="COMPLETEbox" id="COMPLETEbox">
            <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;" /><br>

            <select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
                <option value="">Reason:</option>
                <option value="NoShow">No Show</option>
                <option value="Unfixable">Unfixable</option>
                <option value="other">Other</option>
            </select>
            <br>
            <br>
            <br>
            <input type="submit" value="submit" onclick="checkform();">
        </div>
    </form>
</body>
</html>

Answer 2

您的JavaScript验证功能有一点错误，而不是比较（x == y）你做了一个任务（x = y）。

除此之外，获取选择框选择值的技术略有不同。

这是您的代码稍作修改：

 function checkform() {
    var action = document.getElementById('ActionDD'),
          reason = document.getElementById('ReasonDD');

    if (action.options[action.selectedIndex].value =="abandon" && reason.options[reason.selectedIndex].value =="")
    {
        validationMessage = validationMessage + 'Enter Reason';
        valid = false;
    }
    else valid = true;
}

希望它有所帮助。

Answer 3

试试这个。

function checkform() {
    if (document.getElementById('ActionDD').value =="abandon" && (document.getElementById('ReasonDD').value ==""))
        {
          //Your validation message                
          return false;
        }
        else  return true;
}
</script>

平变化（）

 function showHide() {
if(document.getElementById('ActionDD').value =="abandon")
{
 document.getElementById("ReasonDD").style.display= 'block';
 document.getElementById("ReasonDD").required = true;
}
else 
 document.getElementById("ReasonDD").style.display= 'none';

}

更改你的html一点。从按钮移动checkform（）并添加到表单，如下所示。

<form name=StudentForm onsubmit="return checkform()" action="javascript:window.close();">

我试图在我的HTML代码中使用文本框和下拉列表进行验证

3 个答案: