javascript下拉条件

Question

我有以下下拉菜单。如果选择了值 fail，客户希望形成一个错误。我告诉他简单的解决方案是从菜单中删除失败 :) 这样唯一的选项是通过，问题就解决了 :) 不是真的。他仍然想要这两个选项，如果选择失败，他希望看到所需的错误可能是一条文本，说明您需要选择通过。

               <div class="section colm colm6">
                  <label class="field select">
                      <select id="cond" name="Cond" required>
                           <option value=''>Condition</option>
                           <option value='Pass' >Pass</option>
                           <option value='Fail' >Fail</option>
                        </select>
                          <i class="arrow double"></i>                             
                  </label>
               </div> 

我需要在选择文件后立即进行错误检查，而不是等到整个表单提交后才进行。我有另外 2 个失败和通过下拉菜单和 2 个是和没有下拉菜单，我需要做同样的事情。如果我得到一个工作，我应该能够让其他人工作(我希望)

我猜我需要创建某种类似于

的函数

  function checkCategory(){
        if(document.getElementById('cond').value === 'Fail') {
           alert("Client says you need to enter Pass");
   return false;
   }
  }

并且可以使用 onselect(我不确定如何调用它)使用 onselect="javascript:checkCategory();"

我几乎被困在这一点上。非常感谢您的帮助。感谢您的时间。

Answer 1

使用 jquery 很容易做到这一点，只需使用它的 .change() 事件处理程序，如下所示:

$(function() {
    $('#cond').change(function() {
    if(this.value === 'Fail') {
        alert('Please Select Pass');
    }
  })
})

这将解决您的问题。检查这个 jsFiddle:https://jsfiddle.net/mayank_shubham/9d3dcd07/

您也可以在 javascript 中通过在选择菜单中使用 onchange 事件处理程序来执行此操作:

<script>

function checkCategory() {
    if(document.getElementById('cond').value === 'Fail') {
    alert('Please Select Pass');
  }
  return false;
}

</script>
<div class="section colm colm6">
    <label class="field select">
        <select id="cond" name="Cond" onchange = "checkCategory()"required>
             <option value=''>Condition</option>
             <option value='Pass' >Pass</option>
             <option value='Fail' >Fail</option>
          </select>
            <i class="arrow double"></i>                             
    </label>
 </div> 

查看工作 demo