Question

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

选项的值被合并为一个字符串，该字符串将在一系列 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();

    }

例如，它会创建字符串'123'，并根据下面的if / else语句显示我想要显示的div。

var $selects = $('.question select');
$selects.on('change', getValues).first().trigger("change");
// puts values into array
function getValues() {
  var vals = $selects.map(function() {
    return this.value;
  }).get();

  if (vals.join('') === "111") {
    $('.selection-1').fadeIn('swing');
  } else { $('.selection-1').hide();}

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

（我找到了一个小解决方案，但后来我正在使用一系列'if'语句背靠背，我不确定这是不是很好的做法）

  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它将无法取消隐藏，我在jsfiddle中显示了示例。

我试图将所有内容都纳入一个开关语句，但我无法弄清楚我是如何开始这样做的几天:(。

我会包括我的jsfiddle，所以你可以看到这个半现场，提前谢谢你，我对任何其他解决方案持开放态度！

https://jsfiddle.net/Micah_C/uwqtt05a/

动态选择显示和隐藏Div的选项

0 个答案: