0

подскажите пожалуйста как можно при помощи jquery скрыть один блок и показать другой по активации select. Показан первый блок, как при выборе select скрыть его, а показать второй?

.first {
  height: 142px;
  width: 100px;
  background: red;
}

.second {
  height: 142px;
  width: 100px;
  background: green;
  display: none;
}
<select id="credit_mark" class="ptsans" onchange="this.style.color='#282828'">
  <option value="" style="display:none; color: #8c8c8c;">Марка</option>
  <option value="1" style="color:#282828">Hyundai</option>
</select>

<div class="first"></div>
<div class="second"></div>

2
  • 1
    вы попробуйте определить составляющие этой задачи: 1) как добавить обработчик изменения селекта 2) как скрывать блок, они вроде довольно просты в такой постановке.
    – teran
    4 сен 2018 в 17:18
  • 1
    @teran, увы, Ваш комментарий ничем не поможет пользователю. Сюда на форум, по большей части, обращаются те люди, которым нужно "вот это вот" и уже готовый код. Мало кто будет брать и искать по вашим "этапам" информацию в интернете, там помимо ответа на вопрос будет много чего лишнего, а это сбивает с толку в момент решения какой-то проблемы)
    – De.Minov
    4 сен 2018 в 17:50

1 ответ 1

2

В общем, если я правильно понял смысл из коммента)

$('#from').bind('change',function(){
  $('#img').hide();
  $('#slider').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="from">
  <option style="display:none">Выберите марку</option>
  <option>Toyota</option>
  <option>Ford</option>
  <option>Volkswagen</option>
</select>

<br>

<img id="img" src="https://uznayvse.ru/images/stories/uzn_1408446508.jpg" height="150">

<div id="slider" style="display:none; width:300px; height:150px; background:red;"></div>


Trash

Самый простой способ, это нести в value ссылки на картинки, а после выбора нужного варианта, выводить ссылку в картинку.

$('#from').bind('change',function(){
  var Auto = $(this).val();
  $('#to').attr('src',Auto);
});
#to {
  max-width: 100px;
  max-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="from">
  <option style="display:none">Выберите марку</option>
  <option value="https://a.d-cd.net/a3758fu-960.jpg">Toyota</option>
  <option value="https://images.ua.prom.st/915334447_w0_h0_ford_logo_wallpaper.jpg">Ford</option>
  <option value="http://ho4ucar.ru/images/vwlogo.gif">Volkswagen</option>
</select>
<br>
<img id="to" src="">

Можно ещё проще сделать, это в случае, если картинки хранятся у Вас (на сервере).

$('#from').bind('change',function(){
  var Auto = $(this).val();
  $('#to').attr('src', '/auto/'+Auto+'.png');
});
#to {
  max-width: 100px;
  max-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="from">
  <option style="display:none">Выберите марку</option>
  <option>Toyota</option>
  <option>Ford</option>
  <option>Volkswagen</option>
</select>
<br>
<img id="to" src="">

Суть та же, но ссылка как бы за ранее забита и вы ищите, брав название самого <option>.
Но тут будет нюанс с названиями на кириллице.. Т.е. "Лада" придётся переименовывать в Lada, либо в самом <option>, либо делать проверку в скрипте.

7
  • Спасибо за ваш комментарий, но это не то, что я ищу, мне нужно именно скрывать один блок и отображать другой, так скрыт слайдер, мне надо при выборе марки, что бы появлялся мой слайдер. 4 сен 2018 в 17:56
  • Т.е. есть какое-то кол-во слайдеров и при выборе значения открывается этот слайдер, правильно понял?
    – De.Minov
    4 сен 2018 в 17:59
  • Есть один слайдер и он скрыт, вместо него стоит блок с картинкой, при выборе марки блок с картиной скрывается и появляется слайдер. 4 сен 2018 в 18:00
  • @МаксимВоробьев, для каждой марки будет свой блок (слайдер)?
    – De.Minov
    4 сен 2018 в 18:06
  • Нет, там один слайдер 4 сен 2018 в 18:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.