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

【问题标题】：How to manipulate a select options based on another select option in html?如何根据 html 中的另一个选择选项来操作选择选项？
【发布时间】：2018-10-27 10:06:02
【问题描述】：

我有两个选择标签（都是一样的）：

<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

【问题讨论】：

标签： javascript html select dropdown

【解决方案1】：

您需要将更改事件侦听器与名称为start 的选择下拉列表相关联，这样当从此下拉列表中选择每个选项时，您可以像这样在end 下拉列表中show/hide 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>

【讨论】：

@qwww 可以进一步修改代码以使用parseInt()。检查更新的答案。现在可以了。
但是为什么第二个下拉菜单中有“结束”？
您是否需要 name="start" 的选择和文本标签作为“start”？
我假设您需要选择一个作为开始，另一个作为结束，以便结束下拉选项取决于开始选项@qwww
不，我不需要第二个下拉列表中的“结束”...两个下拉列表都只有数字

【解决方案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();
    }

});

【讨论】：

【解决方案3】：

为您的选择提供 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，这应该可以正常工作。

【讨论】：