Изменение значений при выборе определенного select
Очередной раз приветствую вас!!!
Подскажите, как реализовать вот такую таблицу (при выборе определенного select меняются цены): https://www.pit-stop24.ru/shinomontaj_price А если дадите пример кода, буду очень благодарен! |
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) |
Спасибо, но основной вопрос так и остается не раскрытым - как реализовать смену содержимого ячеек при выборе select.
|
Цитата:
Цитата:
|
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>
|
| Часовой пояс GMT +3, время: 15:10. |