javascript下拉条件

javascript dropdown condition

本文关键字：条件 javascript      更新时间：2024-05-14

我有以下下拉列表。如果选择了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>

我需要在选择文件后立即进行错误检查，而不是直到提交整个表单。我还有两个失败和通过的下拉列表和两个是和否的下拉列表，我需要做同样的事情。如果我有一个工作，我应该能够其他（我希望）

我想我需要创建一个类似的函数

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

并且可能使用onselect（我不知道如何调用它）使用onselect="javascript:checkCategory（）；"

在这一点上，我几乎陷入了困境。非常感谢你的帮助。谢谢你抽出时间。

使用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>

查看的工作演示

这就是您想要的吗？

$(function(){
  $("select#cond").on("change", function(){
    if(this.value == "Fail"){
      alert("Client says you need to enter Pass.")
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<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>

你的代码几乎就在那里，

您需要将onChange Event添加到选择元素

  <div class="section colm colm6">
              <label class="field select">
                  <select id="cond" name="Cond" required onChange="checkCategory()">
                       <option value=''>Condition</option>
                       <option value='Pass' >Pass</option>
                       <option value='Fail' >Fail</option>
                    </select>
                      <i class="arrow double"></i>                             
              </label>
           </div>
相关文章：