2下拉選擇框「從 - 到」允許用戶只選擇大於在「從」下拉列表中選擇的值

我的表單中有這兩個下拉框。它允許用戶從一系列值中進行選擇以進行搜索。然而，因爲它是一個from - to系統，所以我不希望from的值大於to的值。它可以是平等的。2下拉選擇框「從 - 到」允許用戶只選擇大於在「從」下拉列表中選擇的值

這個限制我可以在提交表單後使用PHP進行檢查。我的目標是禁止選擇或隱藏不符合上述邏輯的值。

也許如果從from的1800被選擇時，低於1800的值被從下拉to和副隱藏 - 反之亦然。

如何使用JavaScript，jQuery做到這一點？謝謝。

一個第二個解決方法是，如果to值大於from值，一個警告框應該確定和to價值迴歸的from什麼的下一個更大的值..

<select class="form-control" name="from" > 

       <option value="">Choose</option> 
       <option value="1000">1000 cc</option> 
       <option value="1200">1200 cc</option> 
       <option value="1400">1400 cc</option> 
       <option value="1600">1600 cc</option> 
       <option value="1800">1800 cc</option> 
       <option value="2000">2000 cc</option> 
       <option value="2500">2500 cc</option> 
       <option value="3000">3000 cc</option> 
       <option value="3500">3500 cc</option> 
       <option value="4000">4000 cc</option> 

    </select> 

    <select class="form-control" name="to" > 

       <option value="">Choose</option> 
       <option value="1000">1000 cc</option> 
       <option value="1200">1200 cc</option> 
       <option value="1400">1400 cc</option> 
       <option value="1600">1600 cc</option> 
       <option value="1800">1800 cc</option> 
       <option value="2000">2000 cc</option> 
       <option value="2500">2500 cc</option> 
       <option value="3000">3000 cc</option> 
       <option value="3500">3500 cc</option> 
       <option value="4000">4000 cc</option> 

    </select>

來源

2014-03-13 EnexoOnoma

這是更好地包括你已經嘗試過的代碼，並說明到底什麼是行不通的。 –

也許適合您的需要：

DEMO jsFiddle

$('select[name=from]').on('change', function(){ 
    var self = this; 
    $('select[name=to]').find('option').prop('disabled', function(){ 
     return this.value && this.value < self.value && self.value 
    }); 
}); 

$('select[name=to]').on('change', function(){ 
    var self = this; 
    $('select[name=from]').find('option').prop('disabled', function(){ 
     return this.value && this.value > self.value && self.value 
    }); 
});

來源

2014-03-13 12:31:19

謝謝我編輯它，我也反過來也 – EnexoOnoma

你應該檢查選擇的值，也請參閱：http://jsfiddle.net/q7He9/2/否則，選擇默認值會帶來某種'錯誤」。順便說一句，如果這個答案幫助你，那麼接受它來關閉問題 –

<select class="form-control" name="from" id="from" > 

       <option value="">Choose</option> 
       <option value="1000">1000 cc</option> 
       <option value="1200">1200 cc</option> 
       <option value="1400">1400 cc</option> 
       <option value="1600">1600 cc</option> 
       <option value="1800">1800 cc</option> 
       <option value="2000">2000 cc</option> 
       <option value="2500">2500 cc</option> 
       <option value="3000">3000 cc</option> 
       <option value="3500">3500 cc</option> 
       <option value="4000">4000 cc</option> 

    </select> 

    <select class="form-control" name="to" id="to"> 

       <option value="">Choose</option> 
       <option value="1000">1000 cc</option> 
       <option value="1200">1200 cc</option> 
       <option value="1400">1400 cc</option> 
       <option value="1600">1600 cc</option> 
       <option value="1800">1800 cc</option> 
       <option value="2000">2000 cc</option> 
       <option value="2500">2500 cc</option> 
       <option value="3000">3000 cc</option> 
       <option value="3500">3500 cc</option> 
       <option value="4000">4000 cc</option> 

    </select> 

<script> 
$("#from").change(function(){ 
    var to = +$(this).val(); 
    $("#to option").each(function(){ 
     if ($(this).val() < to) 
     { 
      $(this).hide(); 
     } 
     else 
     { 
      $(this).show(); 
     } 
    }); 
}); 
</script>

來源

2014-03-13 12:32:12 Mohan

這裏是所有workarouds的完整解決方案

$('select[name=to]').on('change', function(){ 
var self = this; 

var fromvalue=$('select[name=from]').find('option:selected').val(); 

if(self.value<fromvalue) 
{ 
    alert('to is smaller than the value of from'); 

    $("#ddlto option").each(function() { 
    if(fromvalue < $(this).val()) { 
    $(this).attr('selected', 'selected'); 
     return false; 
    }       
    }); 

}

}）;

希望這將解決您的問題

來源

2014-03-13 12:47:58

This will work :- 

    $("#from").on("change", function() { 
    var fromVal = $(this).find("option:selected").val(); 

    $("#to option").each(function() { 
    if ($(this).val() < fromVal) 
     $(this).attr("disabled", "disabled"); 
    else 
     $(this).removeAttr("disabled"); 

    }); 

}); 

    $("#to").on("change", function() { 
    var toVal = $(this).find("option:selected").val(); 

     $("#from option").each(function() { 
     if ($(this).val() > toVal) 
      $(this).attr("disabled", "disabled"); 
     else 
      $(this).removeAttr("disabled"); 

     }); 

    }); 

You can accept the answer if it helps you ;)

來源

2014-03-13 16:14:11

2下拉選擇框「從 - 到」允許用戶只選擇大於在「從」下拉列表中選擇的值

回答

相關問題