使用多个选择框压缩页面的jQuery隐藏/显示脚本

我正在构建一个页面，它将有几个选择框，根据选择的值显示特定的链接。我可以很好地展示/隐藏一切，但我知道我做事情很艰难。我对JS/jQuery还很陌生，所以我不知道如何将脚本压缩成单个函数（我相信这是可能的）

工作jquery： 表明上述方法有效。我不想为页面上的每个select box实例构建大量这样的函数，其中大约有12个

我尝试了下面的代码，它有点工作，但它隐藏了所有其他选择，每当你做一个新的。我希望用户在其他选择框中进行新选择时能够保留其他选择

$('select').change(function () {
  $('.links').hide();
  $('.ver' + $(this).val()).show();
}).change();

这似乎奏效了

解释：

$('select').change(function () {
  $(this)  // <select />
    .parent() // <div />
    .next()  // <div />
    .children() // <p /><p />
    .hide() // hide them both
    .filter(".ver" + $(this).val()) // select the one with correct ver class
    .show(); // show it
}).change();

$（'select'）。更改（函数（）{
$（本）//
.parent（）//
.next（）//
.children（）/

.hide（）//同时隐藏它们
.filter（“.ver”+$（this.val（））//选择具有正确版本类的版本
.show（）；//显示它
}).change（）；

在不更改HTML结构或使用额外类的情况下（就像我在本答案的上一个版本中所做的那样），您可以执行以下操作：

$('.component').each(function(){
  var $component = $(this);
  $component.find('select').on('change', function(){
    $component.find('.links').hide();
    $component.find('.ver' + $(this).val()).show();
  }).change();
});

工作演示：

---

您可以重命名类名吗？您可以对布局应用什么类型的更改？是的，所有内容都可以修改。这正是我开始测试的框架。到目前为止，这似乎是可行的，谢谢你的解释！我将在我的生产环境中对它进行更多的测试，如果它在那里有效，我将标记为答案。谢谢我选择了另一个答案，因为我认为它更健壮，并且似乎可以解释不同组件的HTML结构的细微差异。然而，我从这个答案中学到了很多——我只是想让你知道这一点。谢谢你的帮助：）这个答案和上一个一样有价值。在这种情况下，即使我必须修改其中一个组件，这个脚本也应该可以工作，这样HTML结构不会像其他组件那样以完全相同的方式流动。是的，它不依赖于对象的顺序，也不需要任何额外的类或标识符。你也许可以把它细化一点。。。如果我这样做了，我会更新答案。这是工作得很好，足够健壮，即使在HTML结构变化的情况下仍然可以工作。谢谢

$('select').change(function () {
  $(this)  // <select />
    .parent() // <div />
    .next()  // <div />
    .children() // <p /><p />
    .hide() // hide them both
    .filter(".ver" + $(this).val()) // select the one with correct ver class
    .show(); // show it
}).change();

$('.component').each(function(){
  var $component = $(this);
  $component.find('select').on('change', function(){
    $component.find('.links').hide();
    $component.find('.ver' + $(this).val()).show();
  }).change();
});