时间戳

首页 > 解决方案 > 下拉 div 切换 2 个不同的 div

javascript - 下拉 div 切换 2 个不同的 div

问题描述

我有一个运行良好的现有 javascript 解决方案，但我遇到了一个新的增强功能，它要求我命名为“alwaysdisplayonselection”的 div 只有在下拉选择从默认更改为其他内容时才可见。

这是工作的JSFIDDLE

这是HTML代码：

<select name="my-select" class="js-my-select">
  <option value="nothing" selected>Select Color</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>
<div class="js-my-image alwaysdisplayonselection">This is visible once a selection is made, but invisible once the selection is returned to default, or the first dropdown option with "nothing" value.</div>

这是在不同 Div 之间切换的 javascript：

$(function() {
  var $select = $('.js-my-select'),
    $images = $('.js-my-image');

  $select.on('change', function() {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
  });
});

我将不胜感激任何帮助，让“alwaysdisplayonselection”div 只显示一次，并且一旦刷新页面或选择的选项将“nothing”作为值，就会选择并隐藏选项。

先感谢您！

标签： javascriptjqueryhtmltoggle

解决方案

您可以在更改事件中切换可见性：

$('.alwaysdisplayonselection').toggle(this.value != 'nothing');

你更新的小提琴

var $select = $('.js-my-select'),
    $images = $('.js-my-image');

$select.on('change', function () {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
    $('.alwaysdisplayonselection').toggle(this.value != 'nothing');
});
div {
  display: none;
  height: 50px;
  width: 50px;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="my-select" class="js-my-select">
    <option value="nothing" selected>Select Color</option>
    <option value="red">Red</option>
    <option value="orange">Orange</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>
<div class="js-my-image alwaysdisplayonselection">This is visible once a selection is made, but invisible once the
    selection is returned to default, or the first dropdown option with "nothing" value.
</div>

推荐阅读