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

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

您需要将变更事件侦听器与select下拉列表与名称start关联起来，以便当从该下拉列表中选择每个选项时，您可以像这样在end下拉列表中创建option。另外，请注意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>

​

Answer 2

您需要添加一个onchange监听器，并使用第一个select的值循环第二个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 3

将ids提供给您的选择，例如：#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，这应该会很好。