單位轉換驗證雙向

Question

我正在進行單位轉換項目，其中我將單位轉換爲KG => GRAM或KG => TON等。我必須設置驗證方式，例如一旦選擇單位進行轉換，例如（KG => GRAM），它不應該允許用戶從（GRAM => KG）轉換。

這裏是我的代碼：

<select onchange="checkDuplicateUnitConversion(this,0,'to');" class="to-unit0" name="toUnit"> 
    <option value="1">kilogram</option> 
    <option value="2">gram</option> 
</select> 

JS代碼

function checkDuplicateUnitConversion(element,row,type) 
{ 
     $("select").each(function(index){   
     }); 

    switch(type) 
    { 
     case 'from': 
      $("select[name='fromUnit']").each(function(index){ 
       if(this.value===$('.to-unit'+index).val()){ 
          alert("Select Valid Units"); 
          $('#addMoreUnitConversion').prop('disabled', true); 
       } 
       else{ 
         $('#addMoreUnitConversion').prop('disabled', false); 
       } 
      }); 
     break; 

     case 'to': 
      $("select[name='toUnit']").each(function(index){ 

       if(this.value===$('.from-unit'+index).val()){ 
          alert("Select Valid Units"); 
           $('#addMoreUnitConversion').prop('disabled', true); 
       } 
        else{ 
         $('#addMoreUnitConversion').prop('disabled', false); 
       } 
      }); 
     break;  
    } 
} 

Answer 1

我敢肯定有一個更優雅的方式來做到這一點，但低於應滿足您的需求：

$('.convert').change(function() { 
 
    $('#warn').html(''); 
 
    // loop through each pair of from/to elements 
 
    $('.from').each(function(i, e) { 
 
    var from = $(e).val(); 
 
    var to = $('.to').eq($('.from').index($(this))).val(); 
 
    var curVals = [from, to]; 
 
    // store current values from both in an array 
 
    // loop through each pair of elements again to check against the current values 
 
    $('.from').each(function(chki, chke) { 
 
     // check that this is not the same element from above and that both selects have been selected 
 
     if (chke != e && $.inArray('Select one', curVals) === -1) { 
 
     var from = $(chke); 
 
     var to = $('.to').eq($('.from').index($(this))); 
 
     // get reference to the elements we are checking in this itteration 
 
     // if the both of the checked values are in our temporary value array from the first loop, the conversion is either duplicated or reversed and we need to clear the current elements to avoid that 
 
     if ($.inArray(from.val(), curVals) !== -1 && $.inArray(to.val(), curVals) !== -1) { 
 
      $('#warn').html('Duplicate values removed'); 
 
      setTimeout(function() { 
 
      $('#warn').html(''); 
 
      }, 3000); 
 
      from.val('Select one'); 
 
      to.val('Select one'); 
 
     } 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

#warn { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table width="400" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="col">From</th> 
 
     <th scope="col">To</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select class="from convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <select class="to convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select class="from convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <select class="to convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select class="from convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <select class="to convert"> 
 
      <option value="Select one">Select one</option> 
 
      <option value="1">kilogram</option> 
 
      <option value="2">gram</option> 
 
      <option value="3">ton</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="warn"></div>