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

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>

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

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

在第二个菜单中进行选择后，我想要显示第三个菜单。

但是，如果第一个菜单中的选定值是“中等”，我只想显示第三个菜单。或者＆＃39;重＆＃39;。选择默认＆＃39;空白＆＃39;或者＆＃39; Light＆＃39;应隐藏第三个菜单。

目前它并没有像我喜欢的那样发挥作用。

$(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

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

＆＃13;

＆＃13;

$(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();
      
    }
  });

});

＆＃13;

#colour {
  display: none;
}

#textureColour {
  display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）

Answer 2

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

修改

我必须更改完整的代码。我认为这就是你要找的东西。

$(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');

});

Answer 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