Question

我有两个选择标签（两者都相同）：

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

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

在这里，如果我从第一个下拉列表中选择一个选项，那么在第二个下拉列表中，不应显示直到所选选项的所有选项。例如，如果我在第一个下拉列表中选择5，则第二个下拉列表应仅显示6-11。任何人都可以帮我这个吗？

JSFIDDLE

Answer 1

您需要添加onchange事件侦听器，并使用第一个select的值循环第二个选择并隐藏选项。

使用jQuery：

var max = 0;
var options = $("select[name='end']").find('option');

$("select[name='start']").on('change', function() {

    options.each(function(){
        $(this).show();
    });

    max = parseInt( $(this).val() );

    for (i=0; i < max; i++) {
        $(options[i]).hide();
    }

});

Answer 2

为您的选择提供ID，例如：#firstSelect和#secondSelect 我使用 jquery 制作了这个解决方案，因为它比普通的javascript更简单。试试这个：

 $("#firstSelect").change(function () {
      var selectedOption = $("select option:selected").text();
      $("#secondSelect option").each(function() {
        var txtOption = $(this).text();
        if(parseInt(txtOption) <= parseInt(selectedOption)){ 
          $(this).remove();
        }
      });
});

如果你想让它多次工作，那么当你再次改变第一个时，第二个会再次改变并添加或删除刚开始的选项：

$("#firstSelect").change(function () {
    var selectedOption = $("select option:selected").text();
    $("#secondSelect").empty();
    for (var index = 2; index < 12; index++) {
        if(index >= parseInt(selectedOption)){
            $("#secondSelect").append(
                $('<option></option>').html(index)
            );
        }
    }
});

检查for循环中的索引，这些索引是从2到12的硬编码。你也可以做到这一点。但是如果在第一个下拉列表中总是存在选项1,2,3 ... 9,10，那么这应该可以正常工作。

Answer 3

您需要将更改事件监听器与名称为start的选择下拉列表相关联，以便在从此下拉列表中选择每个选项时，show/hide option end像这样下拉。另外，请记下parseInt()，它会将option值与整数进行比较，并为您提供正确的结果。

$('select[name="start"]').change(function(){
  var selectedValue = parseInt($(this).val());
  changeEndOptions(selectedValue);
});

function changeEndOptions(startValue){
  var $options = $('select[name="end"] option');
  $options.each(function(){
    var optionVal = parseInt($(this).val());
    if(optionVal <= startValue){
      $(this).hide();
    } else {
      $(this).show();
    }
  });
}

<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>5</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>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

如何根据html中的另一个选择选项操作选择选项？

3 个答案: