ドロップダウンメニューボタンを押したときの確認/警告

Question

ユーザーは、フォームに進む前に、ドロップダウンメニューのオプションの1つを選択する必要があります。オプションが選択されていない場合、「次のボタン」は警告を送信するはずです。 YesとNoの両方で次のボタンが機能するようにしてください。私はこれのためにJavaScriptが必要です。これは何が必要です

var $nextButton = document.getElementById('nextbutton'); 
$nextButton.addEventListener('click', nextButtonfunc); 

var nextButtonfunc = function() { 
var $dropDownPast = document.getElementById('past'); 
if ($dropDownPast.value === '') alert('message') 
} 

：あなただけのJavaScriptを使用している場合

<fieldset> 
 
\t \t <h2 class="fs-title">Past History </h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
     <div> 
 
<select name="past" id="past"> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" name="next" class="next action-button" id="nextpast" value="Next" /> 
 
\t </fieldset>

Answer 1

この1つは正常に動作し、彼らは、これはユーザーが移動することができないオプション

function alertBox() { 
 
    if($("#past option:selected").text() == "Select One"){ 
 
    alert("You must select an option!"); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset> 
 
\t \t <h2 class="fs-title">Past History </h2> 
 
\t \t <h3 class="fs-subtitle">Please select one of the following</h3> 
 
     <div> 
 
<select name="past" id="past"> 
 
    <option value=""disabled selected>Select One</option> 
 
    <option value="a">Yes</option> 
 
    <option value="b">No</option> 
 
</select> 
 
     </div> 
 
     <br> 
 
\t \t <input type="button" name="previous" class="previous action-button" value="Previous" /> 
 
\t \t <input type="button" onclick="alertBox()" name="next" id="next" class="next action-button" id="nextpast" value="Next" /> 
 
\t </fieldset>

Answer 2

が、ちょうどそのボタンのリスナーを追加します。ここでは

は私のHTMLのですか？

Answer 3

document.querySelector("input[name='previous']").addEventListener('click',mainAction) 
     document.querySelector("input[name='next']").addEventListener('click',mainAction) 

     function mainAction(){ 
      if($('select option:selected').val() == 'a' || $('select option:selected').val() == 'b'){ 
       //do ur stuff 
      }else{ 
       alert('Please select A or B'); 
      } 
     }