Question

我有2个<select>输入。如果我在第一个输入中选择一个选项，我想根据第一个输入的选定选项按ID过滤选项。

我已为第二个输入（"prod"+id）

中的每个选项定义了id

这是HTML：

<select id="provider" name="provider">
    <option selected="selected" value="">--- Select providers ---</option>
    <option value="1">Provider 1</option>
    <option value="2">Provider 2</option>
    <option value="3">Provider 3</option>
</select>

<select id="product" name="product">
    <option id="" value="" selected="selected">--- Select products ---</option> 
    <option id="prod2" value="1">Product 1</option>
    <option id="prod2" value="2">Product 2</option>
    <option id="prod2" value="3">Product 3</option>
    <option id="prod3" value="4">Product 4</option>
    <option id="prod1" value="5">Product 5</option>
    <option>
</select>

这是我的jQuery代码：

$(document).ready(function(){
    $('#provider').change(function(){
        var filter = $(this).val();
        $('#type').each(function(){
            if ($(this).val() == filter) {
                $(this).show();
            } else {
                $(this).hide();
            }
            $('#prod1').val(filter);
        })
    })
})

我想仅显示所选提供商的产品。

在线演示：http://jsfiddle.net/notfoundlife/BCedV/1/

Answer 1

我认为你的问题是你没有选择单独的选项，而是整个选择列表，所以一切都在隐藏。尝试像这样更换选择器并从那里开始。

$(document).ready(function(){
   $('#provider').change(function(){
   var filter = $(this).val();
   $('#type option').each(function(){
           if ($(this).val() == filter) {
             $(this).show();
           } else {
             $(this).hide();
           }
     })
  })
})

Answer 2

假设您的html在上面，我认为这应该适合您。

$(document).ready(function(){
   $('#provider').change(function(){
   var filter = $(this).val();
   $('#product option[value=' + filter +']').attr('selected', 'selected');
  });
});

如何通过jquery选择更改值选择选项的选项

2 个答案: