javascript - 选择上的下拉按钮禁用某些第二个下拉选项

Question

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

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

我不能让开始时间超过结束时间，但不确定我应该怎么做。

Answer 1

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

$('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>