Question

我有一组简单的级联下拉列表，使用jquery进行验证。它们都是必需的。

如果您未选中并尝试提交表单，则它们都会显示为红色，表单将不会提交。

但是，如果您在第一个中选择一个值而未选择 second 下拉列表，然后提交表单，则表单将提交并抛出一个服务器因为没有选择所需的第二个下拉值，所以会出现错误。

这是（已剥离的）HTML，未选中：

<form action="/Project/ProjectDocumentUpload" class="form-horizontal" enctype="multipart/form-data" method="post" onsubmit="return Validate('UploadFormModal');">
    <div class="control-group">
        <label class="control-label" for="inputType">Phase</label>
        <div class="controls">
            <select id="PhaseDD" data-val="true" data-val-required="Select a Phase.">
                <option value="">-Select-</option>
                <option value="1">Planning</option>
                <option value="2">Procurement</option>
                <option value="3">Installation</option>
                <option value="4">Closure</option>
            </select> <span class="required">*</span>
        </div>
    </div>
    <div class="control-group" style="float:left;">
        <label class="control-label" for="inputType">Process</label>
        <div class="controls ProcessDD">
            <select id="ProjectProcessTypeId" name="ProjectProcessTypeId" data-val="true" data-val-required="Select a Process">
               <option value="">-Select-</option>
           </select> <span class="required">*</span>
        </div>
    </div>
    <div>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <input type="submit" value="Save changes" class="btn btn-primary disable-button-upon-submit">
    </div>

当我在第一个中选择一个值时，唯一改变的是第二个下拉列表现在有值：

<select id="ProjectProcessTypeId" name="ProjectProcessTypeId" data-val="true" data-val-required="Select a Process">
    <option>-Select-</option> 
    <option value="1">Kickoff</option> 
    <option value="2">Project Team Selection</option> 
    <option value="3">Define the Work</option>
</select>

我在这里缺少什么？如何获得第二个下拉列表进行验证？

谢谢！

Answer 1

找到它。填充第二个下拉列表时，显示：

<option>-Select-</option>

需要这样：

<option value=''>-Select-</option>

级联下拉验证：第一个下拉列表始终在选择第一个下拉列表后验证

1 个答案: