Question

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

dropdown 1

如果有人从dropdown 1中选择一个值，比如大约6，那么当且仅当值连续存在时，他才能从结束中选择下一个值。

让1,2,3,4,5,6中的值为：dropdown 2 让1,2,3,4,5,9,10,11中的值为：3

让某人在dropdown1中选择drop down 2然后他可以从6中选择4或5而不是9，因为它不是连续的（因此应该有警报）假设有人在dropdown1中选择了drop down 2，那么他就无法从namespace MyApplication.ApiControllers { [Authorize] [RoutePrefix("api/customers")] [AppExceptionFilter] public class CustomersController : ApiController { private readonly IMediator _mediator; public CustomersController(IMediator mediator) { _mediator = mediator; } [HttpGet] [Route("GetCustomer")] public async Task<IHttpActionResult> GetCustomer(string customerNumber, string customerType = null) { var result = await _mediator.RequestAsync(new GetCustomerRequest(customerNumber, customerType)); return Ok(result); } } }中选择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>

Answer 2

如果我理解你的要求，
我认为这是你想要实现的目标：
（有关详细信息，请参阅我的代码中的注释）

$("select[name=start]").change(function() { // On change of the first select
  var start = +$(this).val(); // Get selected value as number
  var end, end_1 = 1;         // Initialize values for 2nd select

  // Select the "disabled" value on the 2nd select,
  // and disable all the options.
  $('select[name=end]').val('');
  $('select[name=end] option').prop('disabled', true);
  
  // For each option, except the first one
  $('select[name=end] option:not(:first-of-type)').each(function() {

    end = +$(this).val(); // Get value as number
    if (
      (end != end_1 + 1)  // Detect if there's a gap
      &&                  // AND
      (end_1 > start)     // Previous value is above start
    ) {
      return false;       // Exit function
    }
    
    // The below is executed if the function is not exited
    end_1 = end;          // Put current value in previous
    if(end > start){      // If current is above start…
      $(this).prop('disabled', false); // … enable this option!
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

请注意，我没有修改HTML中的任何内容以使其正常工作如果我错了，或者你想让我修改一些东西，请随意发表评论。

希望它有所帮助。

Answer 3

这是你在找什么？

$("select[name=start]").change(function() {
  var itemsFound = $(this).val();
  itemsFound = parseInt(itemsFound, 10);
  $('select[name=end] option').each(function() {
    currentItem = parseInt($(this).text(), 10);
    if (currentItem <= itemsFound) {
      $(this).hide();
    }
  });
});

<强>演示

＆＃13;

$("select[name=start]").change(function() {
  var itemsFound = $(this).val();
  itemsFound = parseInt(itemsFound, 10);
  $('select[name=end] option').each(function() {
    currentItem = parseInt($(this).text(), 10);
    if (currentItem <= itemsFound) {
      $(this).hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

如何验证这种情况？

3 个答案: