javascript - 如何验证这个条件？

Question

我有两个这样的下拉列表:

 <select class="form-control" name='start'>
        <option selected disabled hidden value="">start</option>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>

</select>


<select class="form-control" name='end'>
    <option selected disabled hidden value="">end</option>


    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

如果有人从 dropdown 1 中选择一个值，比如说 6，当且仅当值连续存在时，他可以从末尾选择下一个值。

让 dropdown 1 中的值是:1,2,3,4,5,6让 dropdown 2 中的值是:1,2,3,4,5,9,10,11

假设某人在 dropdown1 中选择了 3 然后他可以从 drop down 2 中选择 4 或 5 而不是 9 因为它不是连续的(所以应该有警报)假设有人在 dropdown1 中选择了 6 然后他不能从 drop down 2 中选择 9 或以上(所以应该有一个警告)

必须做什么？

Answer 1

我发现您的问题相当令人困惑(您未能正确解释条件)，但是使用这种通用方法，您可以在 HTML 中定义您想要的值，并且可以在同一个 DOM 上进行多个选择，这些选择的行为与此类似。代码应该是不言自明的。

$(document).on('ready', function() {
  $('select.start-to-end').each(function() {
    var endTarget = $($(this).data('targetEnd')),
        endOptions = $('option', endTarget);
    $(this).on('change', function() {
      var allowed = $('option:selected', this).data('allowEnd').toString().split(',');
      endOptions
        .prop('disabled', true)
        .filter(function() {
          return allowed.indexOf($(this).val()) > -1
        })
        .prop('disabled', false);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select class="form-control start-to-end" name='start1' data-target-end="select[name=end1]">
    <option selected disabled value="">start</option>
    <option value="1" data-allow-end="2">1</option>
    <option value="2" data-allow-end="3">2</option>
    <option value="3" data-allow-end="2,4">3</option>
    <option value="4" data-allow-end="3,5">4</option>
    <option value="5" data-allow-end="4,6">5</option>
    <option value="6" data-allow-end="5,7">6</option>
    <option value="7" data-allow-end="6,8">7</option>
    <option value="8" data-allow-end="7,9">8</option>
    <option value="9" data-allow-end="8,10">9</option>
    <option value="10" data-allow-end="9,11">10</option>
</select>

<select class="form-control" name='end1'>
    <option selected disabled value="">end</option>
    <option disabled value="2">2</option>
    <option disabled value="3">3</option>
    <option disabled value="4">4</option>
    <option disabled value="5">5</option>
    <option disabled value="6">6</option>
    <option disabled value="7">7</option>
    <option disabled value="8">8</option>
    <option disabled value="9">9</option>
    <option disabled value="10">10</option>
    <option disabled value="11">11</option>
</select>