Javascript 使用Jquery将所选元素更改回主基

我正在创建一个选择框，当我在主选择框域中选择一个值时，它将显示其他选择框类型，如硅藻或鞭毛虫。。。。我已经完成了这个部分，但是，我正在尝试在一个选择框中更改回所选项目，新的项目将显示在第一个主项目中。我的意思是，当我在域选择框中选择一个硅藻时，它会出现，然后我在硅藻中选择一些项目。然后我更改域中的其他项目，其他选择框将出现，硅藻将消失。但问题是，我选择的所选项目在我选择它时仍然保持不变，我想将其更改回第一个选项默认值，而不是项目。这是我的密码

我已尝试放置“selectedIndex”，0。然而，它不起作用

HTML

Jquery

$(document).ready(function(){
    $('.Domains').ready(function(){
        $('select').change(function(){
            $("select option:selected").each(function(){
                if($(this).attr("value")=="Diatoms"){
                    $('.domains_types').hide();
                    $('.Diatoms').css('display','inline-block');
                }
                if($(this).attr("value")=="Flagellates"){
                    $('.domains_types').hide();
                    $('.Flagellates').css('display','inline-block');
                }
            });
        }).change();
    });
});

---

您可以轻松优化代码，以减少代码中的冗余。我们可以做一些简单的改进：

• 从

  $（'.Domains'）

  中删除

  ready

  事件侦听器。ready函数仅特定于document对象，它映射到

  DOMContentLoaded

  事件。这只是jQuery提供的一种方便的方法
• 您可以通过调用

  this.value

  来获取
  元素的值，而不是遍历所有选项。这将从代码中删除一层嵌套
• 不必为每个可能的值创建一个新的

  if

  语句，实际上您可以使用

  '.+这个.value

  来选择正确的元素，因为您有第一个
  元素选项值到第二级
  元素的
  包装器的一对一映射。例如，如果选择的值是

  flaglates

  ，则选择器将选择

  $（'..+this.value）

  ，其计算结果为

  $（'.flaglates'）

• 要“重置”第二级
  元素，只需选择第一个选项并将其

  selected

  属性设置为true，即

  $（'option:first child'）。prop（'selected，true'）

• hidden

  不是
  元素的属性/属性。您可以删除它

考虑到这一点，下面是经过改进的工作代码：

$（文档）.ready（函数（）{
$（'.Domains select'）.change（函数（）{
$（“.domains\u types”）
.hide（）//隐藏
元素
.find（'select option:first child'）//获取嵌套select的第一个选项
.prop（'selected'，true）；//选择它
$（'..+this.value）.css（'display'，'inline block'）；
}).change（）；
});
.domains\u类型{
显示：无；
}



领域
硅藻
鞭毛虫
甲藻
纤毛虫
颗石藻
混杂的
其他


类型
紫菀属
细菌


类型
变形虫
黄褐藻

旁注
ready（）
用于文档之外，而不是元素，因此
$（'.Domains'）.ready（function（）{
是无意义的，应该删除。
$（this.attr（'value'）
是jQuery的一种不必要的用法，因为您已经有了元素。请改用
this.value
。另外
$（
$）也可以使用
更改处理程序内的范围太广。在更改处理程序内，
此
将是已更改的选择。
$（'option:selected'，this）
将在已更改的选择中找到所选选项。无需循环所有选择以获取已更改的选项。
.domains_types{
            display: none;
        }

$(document).ready(function(){
    $('.Domains').ready(function(){
        $('select').change(function(){
            $("select option:selected").each(function(){
                if($(this).attr("value")=="Diatoms"){
                    $('.domains_types').hide();
                    $('.Diatoms').css('display','inline-block');
                }
                if($(this).attr("value")=="Flagellates"){
                    $('.domains_types').hide();
                    $('.Flagellates').css('display','inline-block');
                }
            });
        }).change();
    });
});