Question

我的表格中有两个下拉框。它允许用户从一系列值中进行选择以进行搜索。但是因为它是一个从 - 到系统，我不希望from的值大于to的值。它可以是平等的。

这个限制我可以在提交表单后使用PHP检查它。我的目标是禁用选择或隐藏不符合上述逻辑的值。

如果选择了来自1800的{{1}}，则低于from的值将从下拉列表中隐藏1800，反之亦然。

如何使用javascript，jQuery执行此操作？谢谢。

第二种解决方法，如果to的值小于to的值，则警告框应该没问题并返回{{1} }值到下一个更大的from或更高的值..

to

Answer 1

也许这符合您的需求：

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
    });
});

Answer 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>

Answer 3

以下是所有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;
  }                        
    });

}

}）;

希望这能解决您的问题

Answer 4

  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 ;)

2个下拉选择框＆＃34; from - to＆＃34;允许用户只选择大于＆＃34; from＆＃34;中选择的值。落下

4 个答案: