Question

我有一个功能来检查该值是否满足要求，它工作正常，因此我还有另一个下拉列表（选择）以相同的条件进行验证，但是下拉列表值不同，我仅检查空白选择。

目标： 任何改进JS或正确组合它们的方法。提前非常感谢

// for 1st drop down
function checkPrimeSelectChangeValue() {
    var selObj = document.getElementById("dropdown1");
    var selValue = selObj.options[selObj.selectedIndex].value;

    if (selValue == "") { // if blank is selected add css for validation
        $("#dropdown1").attr('disabled', 'disabled');
        $("#dropdown1").addClass("text-error");

    } else {
        $("#btnUpdateForm").removeAttr('disabled'); // disabled button
        removeError("#dropdown1"); // remover error
    }
    return;
}
//  2nd dropdown like below 
function checkSecondSelectChangeValue() {
    var selObj2 = document.getElementById("dropdown2");
    var selValue2 = selObj.options[selObj.selectedIndex].value;

    if (selValue2 == "") { // if blank is selected add css for validation
        $("#dropdown2").attr('disabled', 'disabled');
        $("#dropdown2").addClass("text-error");

    } else {
        $("#btnUpdateForm").removeAttr('disabled'); // disabled button
        removeError("#dropdown2"); // remover error
    }
    return;
}

// Can I do this or Any ipmorvent can be done to this 

function checkCombinedSelectChangeValue() {
    var selObj = document.getElementById("dropdown1");
    var selObj2 = document.getElementById("dropdown2");
    var selValue = selObj.options[selObj.selectedIndex].value;
    var selValue2 = selObj.options[selObj.selectedIndex].value;

    if (selValue == "") { // if blank is selected add css for validation
        $("#dropdown1").attr('disabled', 'disabled');
        $("#dropdown1").addClass("text-error");

    } else {
        $("#btnUpdateForm").removeAttr('disabled'); // disabled button
        removeError("#dropdown1"); // remover error
    }
    return;
    
    if (selValue2 == "") { // if blank is selected add css for validation
        $("#dropdown2").attr('disabled', 'disabled');
        $("#dropdown2").addClass("text-error");

    } else {
        $("#btnUpdateForm").removeAttr('disabled'); // disabled button
        removeError("#dropdown2"); // remover error
    }
    return;  
}

<p>1st dropdown1 </p>
    <select name="test" id="select">
        <option value="">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="nil">nil</option>
    </select>
    <br>

<p>2nd dropdown1 </p>
    <select name="test" id="select2">
        <option value="">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="nil">nil</option>
    </select>

Answer 1

我假设您的功能在选择更改时可以运行，因此对它进行了一些优化。我还假设您想将Disabled属性添加到#btnUpdateForm中，因为您提供的代码并不十分清楚。

首先将禁用的属性添加到“更新”按钮，如下所示：

 <button id="btnUpdateForm" disabled>Update</button>

HTML：

<p>1st dropdown1 </p>
<select class="dropdown" name="test" id="select">
    <option value="">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="nil">nil</option>
</select>
<br>

<p>2nd dropdown1 </p>
<select class="dropdown" name="test" id="select2">
    <option value="">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="nil">nil</option>
</select>

jQuery：

$('.dropdown').change(function() {
   var val1 = $('#select').val();
   var val2 = $('#select2').val();

   if (val1 == '' || val2 == '') {
      $('#btnUpdateForm').prop('disabled', true);
      if (val1 == '') {
         $('#dropdown1').addClass('text-error');
         if (val2 !== '') {
            $('#dropdown2').removeClass('text-error');
         }
      }
      else if (val2 == '') {
         $('#dropdown2').addClass('text-error');
         if (val1 !== '') {
            $('#dropdown1').removeClass('text-error');
         }
      }
   }
   else {
      $('#btnUpdateForm').prop('disabled', false);
      $('#dropdown1').removeClass('text-error');
      $('#dropdown2').removeClass('text-error');
   }
});

现在基本上，每个value=""的下拉菜单都将显示错误，并且仅当两个下拉菜单的值都不为0时，按钮才会启用。

下拉验证和带有额外条件的JavaScript合并if语句进行验证？

1 个答案: