我目前有两个这样的下拉菜单:

        <select name="start" class="form-control">
            {% for i in range(2000) %}
            <option value={{i}}>{{i}}</option>
            {% endfor %}
        </select>
        End
        <select name="end" class="form-control">
            {% for i in range(2000) %}
            <option value={{i}}>{{i}}</option>
            {% endfor %}
        </select>


我的开始时间不能超过结束时间,但是不确定如何执行此操作。

最佳答案

您可以执行以下操作(假设所有值都是数字):



$('select[name="start"').change(function(){
  var year = $(this).val();
  $('select[name="end"] option').filter(function() {
    return parseInt($(this).val()) < year;
  }).prop('disabled', true);
});
$('select[name="end"]').change(function(){
  var year = $(this).val();
  $('select[name="start"] option').filter(function() {
    return parseInt($(this).val()) > year;
  }).prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Start:
<select name="start" class="form-control">
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option value="1000">1000</option>
</select>
End:
<select name="end" class="form-control">
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
  <option value="400">400</option>
  <option value="500">500</option>
  <option value="600">600</option>
  <option value="700">700</option>
  <option value="800">800</option>
  <option value="900">900</option>
  <option value="1000">1000</option>
</select>

07-24 09:46
查看更多