javascript - 在 optgroup 中获取选择选项值以显示额外内容

Question

我浏览了论坛并尝试了这些链接中提到的一些事情：检查下拉列表的选定选项是否不是第一个使用 JavaScript 使用 jquery 在 optgroup 中获取选择选项的索引

我对 Javascript 的了解还是比较基础的，主要只是将它用于表单操作。我从来没有使用过 jQuery（还），从我读过的内容来看，我不需要做我正在做的事情（所以请不要使用 jQuery 解决方案！）

我想做的是根据单击/选择的按钮/选项显示内容。第 1 步工作正常（它只是在单击“不是学生”按钮时显示下拉框。那里没有问题。

第2步我目前卡住了。（而且我知道第 3 步会有问题，但我还没有看过它们）。

第 2 步需要根据下拉菜单中的选项是否被选中来显示一个表单。可能（我还不确定）我需要为每个选择的选项使用不同的形式（但我认为一旦我有了基本代码，我就可以使用“if”和“else”来解决这个问题）。

这是我的 HTML 文档，头部有 JS 编码。

<head>
<title>Tims Form</title>
<style type="text/css">
.errormsg {
    color: red;
    font-style: italic;
    display:none;
    }

#interest {
    display:none;
    }

#msgform {
    display:none;
    }
</style>

<script type="text/javascript">
    function reveal()
        {
            document.getElementById("interest").style.display="block";
        }

    function hide()
        {
            document.getElementById("interest").style.display = "none";
        }

    function showForm()
            /* to display form only when dropdown selection made and submit-button pressed */
        {
            var sel=document.getElementById('interest_choice');

            if (sel.options[sel.selectedIndex].value == "0")
                {
                    document.getElementById("msgform").style.display = "block";
                    document.getElementById("selection_error").style.display = "none";
                }

            else { document.getElementById("msgform").style.display = "none"; 
                    document.getElementById("selection_error").style.display = "block";
                }
        }

    function checkForm()
        {
            var is_valid=true;
            var email=document.getElementById("email");

            /* not a blank field validation */
            if (document.getElementById("firstname").value == "")
                {
                    document.getElementById("firstname_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("firstname_error").style.display = "none"; }

            if (document.getElementById("lastname").value == "")
                {
                    document.getElementById("lastname_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("lastname_error").style.display = "none"; }

            if (document.getElementById("subject").value == "")
                {
                    document.getElementById("subject_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("subject_error").style.display = "none"; }

            if (document.getElementById("message").value == "")
                {
                    document.getElementById("message_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("message_error").style.display = "none"; }

            /* email validation */
            if (email.value =="")
                {
                    document.getElementById("email_blank").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_blank").style.display = "none"; }

            if (email.value.indexOf("@") == -1)
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            if (email.value.indexOf("@") ==0)
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            if (email.value.lastIndexOf(".")<email.value.indexOf("@") )
                {
                    document.getElementById("email_blank").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_blank").style.display = "none"; }

            if (email.value.lastIndexOf(".")>((email.value.length*1)-3))
                {
                    document.getElementById("email_valid").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("email_valid").style.display = "none"; }

            /* Phone data must be numeric validation */
            if (document.getElementById("phone").value="")
                {
                    document.getElementById("phone_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("phone_error").style.display = "none"; }

            if (isNaN(document.getElementById("phone").value))
                {
                    document.getElementById("phone_error").style.display = "block";
                    is_valid=false;
                }
            else { document.getElementById("phone_error").style.display = "none"; }

        return is_valid;
        }

</script>

</head>

<body>
<!-- onclick to show the div with id="interest" when Not A Student is selected -->
    I am: <br/>
    <button id="student" onclick="hide()">A Student</button>
    <button id="not_student" onclick="reveal()">Not A Student</button>

<!-- if not a student -->
<div id="interest">
What area are you interested in studying?

<!-- dropdown (select) list with option groups 
need a submit button to return the value before the form will show?
-->
<form>
<select id="interest_choice">
    <optgroup label="Arts">
        <option value="arts">Arts degree</option>
    </optgroup>
    <optgroup label="Business/Economics">
        <option value="be_undergrad">My first degree (undergraduate)</option>
        <option value="be_postgrad">Postgraduate</option>
    </optgroup>
    <optgroup label="Science">
        <option value="science">Science degree</option>
    </optgroup>
    <optgroup label="Human Sciences">
        <option value="hs_undergrad">Undergraduate</option>
        <option value="psych_postgrad">Postgraduate Psychology</option>
        <option value="ling_postgrad">Postgraduate Linguistics</option>
        <option value="edu_postgrad">Postgraduate Education</option>
    </optgroup>
</select>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>
</form>
</div>

<!-- form -->
<div id="msgform">
<form onsubmit="return checkForm();">
    <fieldset>
        <label>
            First Name:
            <input type="text" name="firstname" id="firstname">
            <div class="errormsg" id="firstname_error">Please enter your first name</div>
        </label>
        <br/>
        <label>
            Last Name:
            <input type="text" name="lastname" id="lastname">
            <div class="errormsg" id="lastname_error">Please enter your last name</div>
        </label>
        <br/>
        <label>
            Email:
            <input type="text" name="email" id="email">
            <div class="errormsg" id="email_blank">Please enter your email address</div>
            <div class="errormsg" id="email_valid">Please enter a valid email address</div>
        </label>
        <br/>
        <label>
            Phone:
            <input type="text" name="phone" id="phone">
            <div class="errormsg" id="phone_error">Please enter a numeric phone number. Do not include ().</div>
        </label>
        <br/>
        <label>
            Subject: (Please only submit one question per enquiry. You can submit multiple enquiries.)<br/>
            <input type="text" name="subject" id="subject">
            <div class="errormsg" id="subject_error">Please enter a subject</div>
        </label>
        <br/>
        <label>
            Message:
            <textarea name="message" id="message"></textarea>
            <div class="errormsg" id="message_error">Please enter a message</div>
        </label>
    </fieldset>
    <input type="submit" value="Submit Form">
</form>
</div>

</body>

目前，当我单击“查询表单”按钮时，它只是将页面刷新回第一个按钮。

解释和帮助将不胜感激！谢谢。

score 1 · Accepted Answer

两件事情...

首先，使用触发 showForm 的按钮，如下所示：

<button onclick="showForm()">Enquiry Form</button>

将其放在表单元素之外，如下所示：

</form>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>

该按钮在表单标签内时会自动提交表单，因此它会刷新页面。

其次，在您的 checkForm 函数中，您正在检查的值似乎是错误的......试试这个：

if (sel.options[sel.selectedIndex].value)
{
    document.getElementById("msgform").style.display = "block";
    document.getElementById("selection_error").style.display = "none";
}

else { document.getElementById("msgform").style.display = "none"; 
    document.getElementById("selection_error").style.display = "block";
}

score 0 · Accepted Answer

艾米丽，

<button>包含在中时，<form>它充当<submit>按钮，单击时，调用 showForm()并刷新页面。<button>如果在表格之外，它应该可以工作。

</form>
<button onclick="showForm()">Enquiry Form</button>
<div class="errormsg" id="selection_error">Please make a selection above.</div>

希望这可以帮助！

javascript - 在 optgroup 中获取选择选项值以显示额外内容

2 回答 2

Related

Reference