jquery - 如何使用 jQuery 过滤选择框选项？

Question

我的表单中有两个选择框:

<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

如何根据第一个选择框中选择的选项过滤第二个选择框中的选项？

因此，例如，如果用户从第一个框中选择了basic 选项，则仅应显示第二个框中的前两个选项。

如何使用 jQuery 来完成此操作？

感谢您的帮助，祝大家圣诞快乐。

Answer 1

您可以使用.filter(callback)方法。您还需要在页面加载时触发 .change() ，以便可以过滤默认值。

$(function() {
    $('#subscription_plan').on('change', function() {
        var val = this.value;
        $('#subscription_interval option').hide().filter(function() {
            return this.value.indexOf( val + '_' ) === 0;
        })
        .show();
    })
    .change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>

更新

您可能希望首先捕获第二个选择中的选项并据此执行操作:

$(function() {
    var interval = $('#subscription_interval option').clone();
    $('#subscription_plan').on('change', function() {
        var val = this.value;
        $('#subscription_interval').html( 
            interval.filter(function() { 
              return this.value.indexOf( val + '_' ) === 0; 
            })
        );
    })
    .change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="basic">Basic</option>
  <option value="premium">Premium</option></select>
</select>

<select id="subscription_interval">
  <option value="basic_monthly">Monthly</option>
  <option value="basic_yearly">Yearly</option>
  <option value="premium_monthly">Monthly</option>
  <option value="premium_yearly">Yearly</option>
</select>