Javascript 2个下拉选择框“从-到”允许用户仅选择大于“从”下拉列表中选择的值

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

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

如果选择了1800 from from，那么低于1800的值将从下拉列表中隐藏，反之亦然

如何使用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>

---

也许这符合你的需要：

---

以下是所有解决方案的完整解决方案

$('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;
  }                        
    });

}

})

---

希望这能解决您的问题

最好包含您尝试过的代码，并描述哪些代码不起作用。您也应该检查选择值，请参阅：否则，选择默认值将带来某种“错误”。顺便说一句，若这个答案对你们有帮助，那个么接受它来结束这个问题

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

$('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;
  }                        
    });

}

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