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

jQuery bind three select menus hide/show

本文关键字：菜单 选择 隐藏 显示 三个 绑定 jQuery      更新时间：2023-09-26

我有三个选择菜单。

<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

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

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

希望对:)有所帮助

也许你只是忘记写$(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');
});

我更新了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

相关文章：