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

我有2个

输入。如果我在第一个输入中选择了一个选项，我希望根据第一个输入的所选选项按id过滤选项

我在第二个输入中为每个选项定义了id（

“prod”+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>

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

---

在线演示：

我认为您的问题在于您没有选择单个选项，而是选择整个选择列表，因此所有内容都隐藏了。尝试像这样更改选择器，然后从那里开始

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

---

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

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

---

那么这里的问题是什么呢？如果（$（this）.attr（'id'）==filter）{i am get value of id option。这个id是提供者的id，它工作正常。谢谢你。

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