jQuery绑定三个选择菜单隐藏/显示答案

【问题标题】：jQuery bind three select menus hide/showjQuery绑定三个选择菜单隐藏/显示
【发布时间】：2016-07-14 03:36:50
【问题描述】：

我有三个选择菜单。

<form>
  <select id="mass" name="mass">
    <option value="Blank" selected>--</option>
    <option value="Light">Light</option>
    <option value="Medium">Medium</option>
    <option value="Heavy">Heavy</option>
  </select>
  <select id="colour" name="colour">
    <option value="Blank" selected>--</option>
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </select>
  <select id="textureColour" name="textureColour">
    <option value="Blank" selected>--</option>
    <option value="Orange">Orange</option>
    <option value="Purple">Purple</option>
    <option value="Black">Black</option>
  </select>
</form>

我希望显示第一个菜单，隐藏第二个和第三个菜单，直到被调用。

如果第一个菜单从默认选项更改，我希望显示第二个菜单。

在第二个菜单中做出选择后，我希望显示第三个菜单。

但是，如果第一个菜单中的选定值是“中”或“重”，我只想显示第三个菜单。选择默认的“空白”或“浅色”应该会隐藏第三个菜单。

目前它没有按我的意愿运行。

$(function() {
  var mass = $('#mass');
  var colour = $('#colour');
  var textureColour = $('#textureColour');

  mass.change(function() {
    if (mass.val() != 'Blank') {
      $(colour).show();
    } else {
      $(colour).hide();
    }
    if (mass.val() === 'Light') {
      $(textureColour).show();
    } else {
      $(textureColour).hide();
    }
  }).trigger('change');

  colour.change(function() {
    if ((mass.val() === 'Medium') || (mass.val() === 'Heavy')) {
      $(textureColour).show();
    } else {
      $(textureColour).hide();
    }
  }).trigger('change');

});

JSFiddle

【问题讨论】：

这是你想要的吗？ jsfiddle.net/qd15hkfr/2
不，因为如果我将值从“中”或“重”更改回“轻”，我希望隐藏第三个菜单。

标签： javascript jquery html css menu

【解决方案1】：

所以，我猜你想要这样的东西

$(function() {
  var mass = $('#mass');
  var colour = $('#colour');
  var textureColour = $('#textureColour');

  mass.change(function() {
    if (mass.val() != 'Blank') {
      $(colour).show();
      $(colour).change();
    } else {
      $(colour).val('Blank');
      $(textureColour).val('Blank');
      $(colour).hide();
      $(textureColour).hide();
    }
  });

  colour.change(function() {
    if ((mass.val() === 'Medium') || (mass.val() === 'Heavy') && colour.val() !== 'Blank') {
      $(textureColour).show();
    } else {
      $(textureColour).hide();
      
    }
  });

});

#colour {
  display: none;
}

#textureColour {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mass" name="mass">
    <option value="Blank" selected>--</option>
    <option value="Light">Light</option>
    <option value="Medium">Medium</option>
    <option value="Heavy">Heavy</option>
  </select>
  <select id="colour" name="colour">
    <option value="Blank" selected>--</option>
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </select>
  <select id="textureColour" name="textureColour">
    <option value="Blank" selected>--</option>
    <option value="Orange">Orange</option>
    <option value="Purple">Purple</option>
    <option value="Black">Black</option>
  </select>
</form>

希望对你有帮助:)

【讨论】：

这有帮助，但我修复了“中”和“重”的线路。 jsfiddle.net/jvanstan/qd15hkfr/4

【解决方案2】：

也许您只是忘记写 $(colour).hide(); 和 $(textureColour).hide(); 而不是 $(colour).hide; 和 $(textureColour).hide;。

编辑

我不得不更改完成您的代码。我想这就是你要找的。p>

$(function() {
  var mass = $('#mass');
  var colour = $('#colour');
  var textureColour = $('#textureColour');

  mass.change(function() {

  if(mass.val() == 'Blank'){
    colour.hide();
    textureColour.hide();
  }else{
    colour.show();
    if(colour.val() != 'Blank') textureColour.show();
  }

  if(mass.val() == 'Light') textureColour.hide();
  }).trigger('change');

  colour.change(function() {
    if(colour.val() == 'Blank') return textureColour.hide();
    if('Medium,Heavy'.split(',').indexOf(mass.val()) != -1){
    textureColour.show();
    }
  }).trigger('change');

});

【讨论】：

感谢您发现这一点，我已经更新了我的代码。但它仍然无法按我想要的方式工作。

【解决方案3】：

我更新了 javascript，现在它也按照我想要的方式运行：

$(function() {
  var mass = $('#mass');
  var colour = $('#colour');
  var textureColour = $('#textureColour');

  mass.change(function() {
    if (mass.val() != 'Blank') {
      $(colour).show();
      $(colour).change();
    } else {
      $(colour).val('Blank');
      $(textureColour).val('Blank');
      $(colour).hide();
      $(textureColour).hide();
    }
  });

  colour.change(function() {
    if (((mass.val() === 'Medium') && colour.val() !== 'Blank') || ((mass.val() === 'Heavy') && colour.val() !== 'Blank')) {
      $(textureColour).show();
    } else {
      $(textureColour).hide();

    }
  });

});

JSFiddle

【讨论】：