在選擇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中較低的值更大

回答

相關問題