javascript - jQuery 绑定(bind)三个选择菜单隐藏/显示

Question

我有三个选择菜单。

<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

Answer 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>

希望对您有所帮助:)