Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2021, 16:57
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 108

Изменение значений при выборе определенного select
Очередной раз приветствую вас!!!

Подскажите, как реализовать вот такую таблицу (при выборе определенного select меняются цены): https://www.pit-stop24.ru/shinomontaj_price

А если дадите пример кода, буду очень благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2021, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

samdo,
как сделать flip
https://schoolsw3.com/howto/howto_css_flip_box.php
как сделать flip последовательно
https://webformyself.com/sozdanie-pl...ii-css-s-sass/
выбрать столбец таблицы можно по индексу
table tr :nth-child(2)
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2021, 16:43
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 108

Спасибо, но основной вопрос так и остается не раскрытым - как реализовать смену содержимого ячеек при выборе select.
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2021, 16:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от samdo
как реализовать смену содержимого ячеек при выборе select.
Сообщение от рони
выбрать столбец таблицы можно по индексу
table tr :nth-child(2)
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2021, 18:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

flip анимация последовательно
samdo,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.price {
    display: flex ;
    flex-direction: column;
}
.price .tiles{
    height: 50px;
    width: 170px;
    position: relative;
    margin-bottom: 4px;
}
.price .tiles > .tile{
    height: 50px;
    width: 170px;
    line-height: 50px;
    background-color: #C0C0C0;
    transition: .3s;
    position:  absolute;
    top: 0px;
    transform-style: preserve-3d;
    transform: rotateX(270deg);
    text-align: center;
    font-size: 32px;
    color: #FFFFFF;
    backface-visibility: hidden;

}
.price .tiles .tile.open{
    z-index: 100;
    transition-delay: var(--pp, 1s);
    transition-duration: var(--ll, .4s);;
    transform: rotateX(0deg);
}
   </style>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    let current = 1;
    let {length} = blocks = document.querySelectorAll(".price .tiles");
    blocks.forEach((div, i) => {
        div.querySelectorAll("div").forEach(
            (d, k) => {
                d.style.setProperty("--pp", `${i * 100}ms`);
                d.style.setProperty("--ll", `${1500 - (500 /length * i)}ms`);
            })
    })
    const show = i => {
        document.querySelectorAll(`.price .tiles > div:nth-child(${current})`).forEach(
            d => {
                d.classList.remove("open")
            })
        current = i;
        document.querySelectorAll(`.price .tiles > div:nth-child(${current})`).forEach(
            d => {
                d.classList.add("open")
            })
    };
    setTimeout(_ => show(current), 300);
    sel.addEventListener("change", _ => show(sel.value));
});
    </script>
</head>
<body>
<select name="" id="sel" onchange="">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="price">
    <div class="tiles">
        <div class="tile">1</div>
        <div class="tile">2</div>
        <div class="tile">3</div>
    </div>
    <div class="tiles">
        <div class="tile">1</div>
        <div class="tile">2</div>
        <div class="tile">3</div>
    </div>
    <div class="tiles">
        <div class="tile">1</div>
        <div class="tile">2</div>
        <div class="tile">3</div>
    </div>
    <div class="tiles">
        <div class="tile">1</div>
        <div class="tile">2</div>
        <div class="tile">3</div>
    </div>
    <div class="tiles">
        <div class="tile">1</div>
        <div class="tile">2</div>
        <div class="tile">3</div>
    </div>
</div>
</body>
</html>

Последний раз редактировалось рони, 14.02.2021 в 23:29.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход по ссылке при выборе в списке (select) Frag Элементы интерфейса 0 30.08.2016 01:02
Изменение прозрачности при клике AJIUK jQuery 8 09.03.2014 16:00
изменение select при клике по ссылке user_001 Элементы интерфейса 3 21.07.2013 17:33
Не реагирует на изменение select pavolve jQuery 4 02.05.2012 13:25
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58