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

您可以使用h .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>

Answer 2

你可以使用这个从Selector [name^="value"]开始来过滤第一个值中第二个选择器中的选项

$("#subscription_plan").change(function(){
val = $(this).val();
$("#subscription_interval option").show(); 
if(val!="")
$("#subscription_interval option").not("[value^='"+val+"']").hide();

})

工作演示：

$("#subscription_plan").change(function(){
val = $(this).val();
$("#subscription_interval option").show(); 
if(val!="")
 $("#subscription_interval option").not("[value^='"+val+"']").hide();

  })

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

Answer 3

＆＃13;

$("#subscription_plan").change(function(){

if($("#subscription_plan").val()=="basic")
  {
    $("#subscription_interval option").not("[value^='basic']").hide();
  }
else
  $("#subscription_interval option").not("[value^='basic']").show();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="subscription_plan">
  <option value="select">Select this</option>
  <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>

＆＃13;

Answer 4

首先，emtyt在第二个选择

中

<select id="subscription_interval">
</select>

然后写下这个jquery代码：

 $("#subscription_plan").change(function(){

   var txt_select;

  if($(this).val()=="basic"){
      txt_select='<option value="basic_monthly">Monthly</option>';
      txt_select+=   '<option value="basic_yearly">Yearly</option>';
   }

   if($(this).val()=="premium"){
      txt_select='<option value="premium_monthly">Monthly</option>';
      txt_select+=   '<option value="premium_yearly">Yearly</option>';
   }

   $("#subscription_interval").html(txt_select);

 });

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

4 个答案: