Javascript 动态选择选项以显示和隐藏div

我创建了动态选择字段，可以根据产品选择更改选项

选项的值被组合成一个字符串，该字符串在一系列if语句中被扫描，以显示特定的div

if(this.value == "1"){
      // REMOVES PREVIOUS SUC CLASS ON LOAD
      $(".suc").remove();
      // APPENDS TO DOWNLOAD
      $(".download").append("<option class='suc' value='1' > 30ghz to 40ghz </option>");
      $(".download").append("<option class='suc' value='2' > 50ghz to 70ghz </option>");
      $(".download").append("<option class='suc' value='3' > 80ghz to 100ghz </option>");
      //APPENDS TO UPLOAD
      $(".upload").append("<option class='suc' value = '1' > 1ghz to 5ghz </option>");
      $(".upload").append("<option class='suc' value = '2' > 5ghz to 10ghz </option>");
      $(".upload").append("<option class='suc' value = '3' > 10ghz to 50ghz </option>");

      // REMOVES OPTION VALUE FROM SELECT
      $(".doorbell").remove();
      $(".chime").remove();

    }

问题是，当我有两个不同的选项应该显示相同的div时，div不会显示

我找到了一个小的解决方案，但是我使用了一系列的“如果”语句，我不确定这是否是一个好的实践

  if (vals.join('') === "111") {
    $('.selection-1').fadeIn('swing');
  } else { $('.selection-1').hide();}
  // When another value is selected in the same select field it's completely hidden
    if (vals.join('') === "121") {
    $('.selection-1').fadeIn('swing');
  } else { $('.selection-1').hide();}

例如，如果值加起来是'111'或'121'或'131'，它们都需要取消隐藏。selection-1它将无法取消隐藏，我在JSFIDLE中展示了这个示例

我曾试图将所有内容都放入switch语句中，但我不太明白如何将其放入，并且我已经连续几天都在进行此操作：

我将包括我的JSFIDLE，这样您就可以看到这个半直播，提前谢谢您，我对任何其他解决方案都持开放态度

---

我不明白！在代码中，您正在侦听产品id的更改事件，其值为1、2和3，但您的if条件正在查找值4和7！嘿@jmmontero我不认为我的if条件是在寻找值4和7:o–它首先创建一个包含所选值的数组，例如：['1'，'1'，'1'，'1'，然后它加入创建'111'，所以在第一个产品中，它的范围只能是1-3，并且始终是3字符串格式？我想。我在这里略过了一些其他问题，但仍然不走运：/再次检查代码！它正在这样做！每次您在产品上选择一个选项时，请转到此行$'products'。在'change'，函数{我不明白！在您的代码中，您正在侦听产品id的更改事件，其值为1、2和3，但您的if条件正在查找值4和7！嘿@jmmontero我不认为我的if条件正在查找值4和7:o–它首先创建一个包含所选值的数组，例如：['1'、'1'、'1']然后它加入创建“111”，因此在第一个产品中，它只能从1到3，并且始终是3字符串格式？我想。我在这里跳过了一些其他问题，但仍然不走运：/再次检查代码！它正在这样做！每次您在产品上选择一个选项时，都转到这一行$“products”。关于“更改”，函数{

  if (vals.join('') === "111") {
    $('.selection-1').fadeIn('swing');
  } else { $('.selection-1').hide();}
  // When another value is selected in the same select field it's completely hidden
    if (vals.join('') === "121") {
    $('.selection-1').fadeIn('swing');
  } else { $('.selection-1').hide();}