There is a list and a button. How can I do it with jQuery so that a pop-up warning appears <p id="warn">Warning</p> when we click on a button with at least one select with value='0' ?

 #warn { display: none; } 
 <select id="length" name="length"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="weight" name="weight"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="height" name="height"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <p id="warn">Warning</p> <button id="button">Result</button>

    2 answers 2

     var selectLength = $("#length"); var selectWeight = $("#weight"); var selectHeight = $("#height"); var warn = $("#warn"); $("#button").on("click", function() { if(!!!selectLength.val() || !!!selectWeight.val() || !!!selectHeight.val() ) { warn.css("display", "inline-block"); } else { warn.css("display", "none"); } }); 
     #warn { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="length" name="length"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="weight" name="weight"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="height" name="height"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <p id="warn">Warning</p> <button id="button">Result</button>

      For select it is better to assign one class - so the sample is easier

       var $select = $('select'); $select.on('change', function(e){ var $this = $(this); $this.val() && $this.removeClass('select_error') }) $('#button').on('click', function(e){ $select.each(function(i, el) { var $this = $(el); !$this.val() && $this.addClass('select_error') }) }) 
       #warn { display: none; } .select_error { border-color: red } .select_error ~ #warn { display: block; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="length" name="length"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="weight" name="weight"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="height" name="height"> <option value="0" selected="" disabled="">Choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <p id="warn">Warning</p> <button id="button">Result</button> Выполнить код

      Also, when an error can be given one common class. Depends on code structure