在选择2中选择1时，删除选择1中较低的值更大

我有2个选择框。选择框1包含“来自”的年份。第二个选择框包含多年的“到”。如果选择年份“from”大于或等于它的值，我想禁用多年的“to”。我在这里使用php做一些循环。我已经尝试了一些相关javascript代码，但没有任何工作。

这里是我的HTML代码：

<?php 
    $starting_year = 1950; 
    $ending_year = 2014; 
    $to = ""; 
    $from =""; 

    for($starting_year; $starting_year <= $ending_year; $starting_year++) { 
     $years[] = '<option value="'.$from.'">'.$starting_year.'</option>'; 
    } 
?> 

<select class="form-control select2me" name="from" id="from"> 
    <option value="" disabled selected></option> 
    <?php echo implode("\n\r", $years); ?> 
</select> 

<select class="form-control select2me" name="to" id="to"> 
    <option value="" disabled selected></option> 
    <?php echo implode("\n\r", $years); ?> 
</select>

我希望你能帮助我。谢谢。

来源

2015-09-07 janie

什么你想达到什么目的？在这段代码中，“from”和“to”看起来完全一样。顺便说一句，我宁愿在JavaScript上做这个，在客户端。 – Voitcus

是的。选择框的代码是相同的。如果我在“from”中选择了一个值，我想删除“to”中的较低值。这就是我的意思。 – janie

更好的使用datepicker –

尝试这一块，如果代码

$('#from').on('change', function() { 
    var val = this.value; 
    disableSmallerYear(val); 
}); 

var disableSmallerYear = function (val) { 
    $('#to option').each(function(){ 
     if (this.value <= val) { 
      $(this).attr("disabled", true); 
     } 
    }); 
}

例子： http://jsfiddle.net/vgjq7qn6/

来源

2015-09-07 06:00:07

代码不完美，这有一些问题.. –

但它实际上适用于我。我刚刚修改了最后一行为$（this）.remove（）; – janie

-1

您是否尝试过使用筛选器与jQuery？

$('option').filter(function() { 
    return this.text < desired_value; 
}).prop("disabled", true);

下面是一个例子：

http://jsfiddle.net/uq9f2f4a/

来源

2015-09-07 05:36:09

我试了一些。但不是这样的结构。无论如何，我会试试这个。谢谢。 :) – janie

第二个选择框是应该有一个禁用选项。这就是为什么有2个选择框。 :) – janie

请记住，您可以选择您想使用选择器进行操作的选择：“选择＃至>选项”，然后进行过滤。我真的尝试过它，它似乎工作！让我知道。 –

希望这将解决您的问题

HTML代码

<table> 
    <tr > 
    <td valign="top"> 
     <select class="formClass"> 
      <option value="">select</option> 
      <option value="2015-09-01">2015-09-01</option> 
      <option value="2015-09-02">2015-09-02</option> 
      <option value="2015-09-03">2015-09-03</option> 
      <option value="2015-09-04">2015-09-04</option> 
      <option value="2015-09-05">2015-09-05</option> 
     </select> 
    </td> 
    <td valign="top"> 
     <select class="toClass"> 
      <option value="">select</option> 
      <option value="2015-09-01">2015-09-01</option> 
      <option value="2015-09-02">2015-09-02</option> 
      <option value="2015-09-03">2015-09-03</option> 
      <option value="2015-09-04">2015-09-04</option> 
      <option value="2015-09-05">2015-09-05</option> 
     </select> 
    </td> 
    </tr> 
    </table>

JS代码

$(function() { 
    $(document).on('change', '.formClass', function (e) { 
     removeSmaller();    
    }); 

    function removeSmaller() 
    { 

     //enable all options/// 
     $('.toClass option').each(function() { 
      $(".toClass").val(''); 
      $(this).prop('disabled', false); 
      //$(this).show(); 
     }); 

     $('.formClass option:selected').each(function() { 
      var select = $(this).parent(), 
      optValue = $(this).val(); 
      //alert(optValue); 

      if($(this).val()!=''){ 
       $('.toClass').not(select).children().filter(function(e){ 
        if($(this).val()<=optValue) 
         return e 
       }).prop('disabled', true); 
       //}).hide(); //If you want to hide then uncommment this and comment upper one 
      } 
     }); 
    } 
});

我已经使选择值静态（以YYYY-MM-DD格式）。

来源

2015-09-07 05:45:23

它也在工作。：D谢谢。 :) – janie

在每一个选择，你应该首先重置第二选择框：

$('#from').on('change', function() { 
    var val = this.value; 
    disableSmallerYear(val); 
}); 

var disableSmallerYear = function (val) { 
    $('#to').prop('selectedIndex', 0).find('option').each(function() { 
     $(this).attr("disabled", this.value <= val); 
    }); 
}

来源

2015-09-07 06:52:55

在选择2中选择1时，删除选择1中较低的值更大

回答

相关问题