提交表單后如何使用JavaScript進行驗證？

Question

我試圖讓我的下拉框在JQuery對話框中正常工作。 我下拉菜單有4個不同的選項。 如果在這種情況下，我僅選擇4個值中的2個，其值為A或B，則我的第二個下拉列表應允許我選擇YES或NO，否則選擇NONE。 這是我的下拉框代碼：

 <div id="Dialog">
        <table>
            <tr><td align="left">Slecet Type</td>
            <td><select name="Type" id="Type">
                    <option value="A">One</option>
                    <option value="B">Two</option>
                    <option value="C">Three</option>
                    <option value="D">Four</option>
                </select>
           </td>
        </tr>
        <tr>
        <td align="left">Slecet Option</td>
        <td>
            <select name="drop" id="drop">
                <option value="">Select One</option>
                <option value="1">Yes</option>
                <option value="0">No</option>
                <option value="99">None</option>
            </select>
        </td>
    </tr>
    </table>
</div>

因此，如果在第一個下拉菜單中選擇“一個”或“兩個”，則只有在這種情況下，我才能在第二個下拉菜單中選擇“是”或“否”，否則應為“無”。 我試圖通過Coldfusion驗證來解決此問題，但這對我不起作用。

<cfif getQuery.Type EQ 'A' OR getQuery.Type EQ 'B'>
      <option value="1">Yes</option>
      <option value="0">No</option>
<cfelse>
      <option value="99">None</option>
</cfif>

因此，現在我正嘗試使用jQuery解決此問題，但無法使其正常工作。 這是我嘗試實現驗證的jQuery代碼：

$("#Dialog").dialog({
            title:'Hello World',
            modal:true,autoOpen:false,width:600,
            buttons: { 
  'Continue': function(){mydrop = $('#drop');
            if($(mydrop).val() != 'A' || $(mydrop).val() != 'B'){alert('Please   select different');};$(this).dialog('close');} }
        }); 

我不確定是否可以在“繼續”按鈕的此函數內使用此代碼，還是應將其放置在其他位置。 如果您知道我應該更改的內容，請告訴我。

Answer 1

您需要獲取選定的選項值才能進行驗證，而不僅僅是檢查下拉列表值。

if($('#drop option:selected').val() != 'A' || $('#drop option:selected').val() != 'B')

根據您對是否應將驗證邏輯放置在“繼續”按鈕內的建議，如果您的驗證僅檢查value ='A'或'B'，則可以將其保留在原處，但是如果邏輯變得復雜且需要更多if-else檢查，創建另一個js函數。

這是一個小提琴游戲： http : //jsfiddle.net/dmfawp8g/11/