jquery沒有標識最小最大浮點數

我正在處理兩個選擇框其中用戶只需選擇Min & Max來自下拉的值。jquery沒有標識最小最大浮點數

我只是防止用戶選擇Max值小於Min值。

我使用jQuery來防止用戶選擇了「最高值是小於最小值」

Case 1: Example If the user selects 4.6 from Min Select Box and If select option less then 4.6 then it gives an error message. But Problem is that if User Select options 10 , 11 , 12+ then it gives an error.

$('body').on('change', '#exp_max', function() { 
 

 
    var min_exp = $('#exp_min').val(); 
 
    var max_exp = $(this).val(); 
 
    if (max_exp < min_exp) { 
 
    console.log('Max Experience Cannot be Less then Min Experience'); 
 
    // $.Notification.autoHideNotify('error', 'top right', 'Max Experience Cannot be Less then Min Experience.','Experience'); 
 
    $(this).prop('selectedIndex', 0); 
 
    } 
 
});

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

 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="col-lg-5"> 
 
    <select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min"> 
 
\t \t \t \t <option value="">Min</option> 
 
\t \t \t \t <option value="-1">Last Year Student</option> 
 
\t \t \t \t <option value="0">Fresher</option> 
 
\t \t \t \t <option value="0.6" >0.6</option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="1.6" >1.6</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t \t <option value="2.6">2.6</option> 
 
\t \t \t \t <option value="3">3</option> 
 
\t \t \t \t <option value="3.6">3.6</option> 
 
\t \t \t \t <option value="4">4</option> 
 
\t \t \t \t <option value="4.6">4.6</option> 
 
\t \t \t \t <option value="5">5</option> 
 
\t \t \t \t <option value="6">6</option> 
 
\t \t \t \t <option value="7">7</option> 
 
\t \t \t \t <option value="8">8</option> 
 
\t \t \t \t <option value="9">9</option> 
 
\t \t \t \t <option value="10">10</option> 
 
\t \t \t \t <option value="11">11</option> 
 
\t \t \t \t <option value="12">12+</option> 
 
\t \t \t </select> 
 
</div> 
 
<div class="col-lg-5"> 
 
    <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max"> 
 
\t \t \t \t <option value="">Max</option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="1.6">1.6</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t \t <option value="2.6">2.6</option> 
 
\t \t \t \t <option value="3">3</option> 
 
\t \t \t \t <option value="3.6">3.6</option> 
 
\t \t \t \t <option value="4">4</option> 
 
\t \t \t \t <option value="4.6">4.6</option> 
 
\t \t \t \t <option value="5">5</option> 
 
\t \t \t \t <option value="6">6</option> 
 
\t \t \t \t <option value="7">7</option> 
 
\t \t \t \t <option value="8">8</option> 
 
\t \t \t \t <option value="9">9</option> 
 
\t \t \t \t <option value="10">10</option> 
 
\t \t \t \t <option value="11">11</option> 
 
\t \t \t \t <option value="12">12+</option> 
 
\t \t \t </select> 
 
</div>

來源

2017-07-04 always-a-learner

你可能想要做一個'parseFloat'您瓦爾斯：'parseFloat（$（ '＃exp_min'）VAL（）。）' – Pete

爲什麼做這麼長時間的操作，顯示消息發送給用戶作爲錯誤消息，當您可以簡單地忽略最大選擇列表中值小於選定的最小選項的那些選項時。檢查我的答案。 –

我也解決了您首先選擇最大值然後選擇最小值的問題。您可以解決代碼並分析它。 –

您可以使用parseFloat，下面是更新的代碼：

$('body').on('change', '#exp_max', function() { 
 

 
    var min_exp = $('#exp_min').val(); 
 
    var max_exp = $(this).val(); 
 
    if (parseFloat(max_exp) < parseFloat(min_exp)) { 
 
    console.log('Max Experience Cannot be Less then Min Experience'); 
 
    //$.Notification.autoHideNotify('error', 'top right', 'Max Experience Cannot be Less then Min Experience.', 'Experience'); 
 
    $(this).prop('selectedIndex', 0); 
 
    } 
 
});

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

 
<div class="col-lg-5"> 
 
    <select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min"> 
 
\t \t \t <option value="">Min</option> 
 
\t \t \t <option value="-1">Last Year Student</option> 
 
\t \t \t <option value="0">Fresher</option> 
 
\t \t \t <option value="0.6" >0.6</option> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="1.6" >1.6</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="2.6">2.6</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="3.6">3.6</option> 
 
\t \t \t <option value="4">4</option> 
 
\t \t \t <option value="4.6">4.6</option> 
 
\t \t \t <option value="5">5</option> 
 
\t \t \t <option value="6">6</option> 
 
\t \t \t <option value="7">7</option> 
 
\t \t \t <option value="8">8</option> 
 
\t \t \t <option value="9">9</option> 
 
\t \t \t <option value="10">10</option> 
 
\t \t \t <option value="11">11</option> 
 
\t \t \t <option value="12">12+</option> 
 
\t \t </select> 
 
</div> 
 
<div class="col-lg-5"> 
 
    <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max"> 
 
\t \t \t <option value="">Max</option> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="1.6">1.6</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="2.6">2.6</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="3.6">3.6</option> 
 
\t \t \t <option value="4">4</option> 
 
\t \t \t <option value="4.6">4.6</option> 
 
\t \t \t <option value="5">5</option> 
 
\t \t \t <option value="6">6</option> 
 
\t \t \t <option value="7">7</option> 
 
\t \t \t <option value="8">8</option> 
 
\t \t \t <option value="9">9</option> 
 
\t \t \t <option value="10">10</option> 
 
\t \t \t <option value="11">11</option> 
 
\t \t \t <option value="12">12+</option> 
 
\t \t </select> 
 
</div>

來源

2017-07-04 10:29:05

如果我先選擇最大值，然後選擇最小值，該怎麼辦？你的代碼的結果是什麼？ –

我沒有看到任何代碼輸出。 –

我看到你的代碼中的錯誤「消息」：「未捕獲TypeError：無法讀取屬性'autoHideNotify' –

當您爲min選擇下拉列表選擇一個值時，您需要隱藏選項。這段代碼對你真的很有幫助。

$(document).ready(function(){ 
 
$('#exp_min').change(function(){ 
 
    var selectedValue = parseFloat($(this).val()); 
 
    $('#exp_max option').each(function(){ 
 
     if(parseFloat($(this).val()) > selectedValue) { 
 
      $(this).css('display', 'block'); 
 
     }else{ 
 
      $(this).css('display', 'none'); 
 
     } 
 
    }); 
 
    $('#exp_max').val(''); 
 
    $('#exp_max').prop('disabled', false); 
 
}) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" required data-parsley-minlength="1" id="exp_min" name="exp_min"> 
 
\t \t \t <option value="">Min</option> 
 
\t \t \t <option value="-1">Last Year Student</option> 
 
\t \t \t <option value="0">Fresher</option> 
 
\t \t \t <option value="0.6" >0.6</option> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="1.6" >1.6</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="2.6">2.6</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="3.6">3.6</option> 
 
\t \t \t <option value="4">4</option> 
 
\t \t \t <option value="4.6">4.6</option> 
 
\t \t \t <option value="5">5</option> 
 
\t \t \t <option value="6">6</option> 
 
\t \t \t <option value="7">7</option> 
 
\t \t \t <option value="8">8</option> 
 
\t \t \t <option value="9">9</option> 
 
\t \t \t <option value="10">10</option> 
 
\t \t \t <option value="11">11</option> 
 
\t \t \t <option value="12">12+</option> 
 
\t \t </select> 
 

 
    <select class="form-control" data-parsley-type="number" id="exp_max" name="exp_max" disabled> 
 
\t \t \t <option value="">Max</option> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="1.6">1.6</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="2.6">2.6</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="3.6">3.6</option> 
 
\t \t \t <option value="4">4</option> 
 
\t \t \t <option value="4.6">4.6</option> 
 
\t \t \t <option value="5">5</option> 
 
\t \t \t <option value="6">6</option> 
 
\t \t \t <option value="7">7</option> 
 
\t \t \t <option value="8">8</option> 
 
\t \t \t <option value="9">9</option> 
 
\t \t \t <option value="10">10</option> 
 
\t \t \t <option value="11">11</option> 
 
\t \t \t <option value="12">12+</option> 
 
\t \t </select>

來源

2017-07-04 10:39:36

謝謝你，@AKA這也是一個可供選擇的答案。謝謝你。 –

你能投票嗎？ –

肯定先生，你的努力是可以接受的。謝謝你。 –

jquery沒有標識最小最大浮點數

回答

相關問題