-1

.product-details .product-sizes {
    border-bottom: 1px solid #bbb;
    text-align: center;
    padding-bottom: 13px;
    padding-top: 12px;
    margin-bottom: 13px;
}

.product-size.selected:hover {
    color: #fff;
}

.product-size.selected {
    border: 1px solid #fa6f57;
    background: #fa6f57;
    color: #fff;
}
.product-size:hover {
    border: 1px solid #fa6f57;
    color: #fa6f57;
}
.product-size {
    color: #1f1f1f;
    border: 1px solid #1f1f1f;
    font-size: 14px;
    width: auto;
    line-height: 30px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 0 4px;
    min-width: 32px;
    cursor: pointer;
}
<body>
<div class="product-sizes">

<span class="product-size selected" data-product-size="s">S</span>
<span class="product-size" data-product-size="m">M</span>
<span class="product-size" data-product-size="l">L</span>

<select id="ProductSize" name="size" size="1" style="display: none;">
<option value="<script>let val = "s"</script>">S</option>
<option value="<script>let val = "m"</script>">M</option>
<option value="<script>let val = "l"</script>">L</option>
</select>
</div>
</body>

<div class="product-sizes"><span class="product-size selected" data-product-size="s">S</span><span class="product-size" data-product-size="m">M</span><span class="product-size" data-product-size="l">L</span><select id="ProductSize" name="size" size="1" style="display: none;"><option value="s">S</option><option value="m">M</option><option value="l">L</option></select></div>
1
  • Создайте воспроизводимый пример
    – meine
    7 июн 2019 в 15:52

1 ответ 1

0

Если отталкиваться от данного примера, то предполагаю, что при выборе SPAN должен выбираться соответствующий select

// Создаём глобальную переменную для сохранения в неё нашего значения, _согласно_ВОПРОСА_!
var GlobalSize;


document.addEventListener("DOMContentLoaded", function(){

// Щелчок по элементам
// Вешаем клик на родителя, чтобы не вешать обработчик на кадлый элемент отдельно
    document.querySelector('.product-sizes').addEventListener('click',function(e){
    // теперь проверяем, что кликнули именно по необходимому элементу (проверяем по классу), другие будут игнорироваться

        if(e.target.classList.contains('product-size')){

            // запускаем необходимые действия
            // Удаляем староый seelect (через цикл для надёжности)
            document.querySelectorAll('.product-size.selected').forEach( function(element) {
                element.classList.remove('selected');
            });
            // Теперь выбираем текущий элемент
            e.target.classList.add('selected');
            // Сохраняем в переменную согласно вопроса
            GlobalSize = e.target.dataset.productSize;
            // Меняем селект, ведь это надо, это подсказывает мой хрустальный шар требуется?
            document.querySelector('#ProductSize').value = e.target.dataset.productSize;
        }
    })

});

https://jsfiddle.net/BaNru/0z72a91u/

16
  • а в зависимости от выбора размера в select может подставлятся цвет на спан?
    – jobananas
    7 июн 2019 в 16:52
  • Зачем вам это, если у вас по-умолчанию селект скрыт? Я для наглядности убрал сокрытие.
    – user337101
    7 июн 2019 в 17:07
  • яб добавил фото рядом с выбором и хорошо получилось бы выбирали бы удобный вариант
    – jobananas
    7 июн 2019 в 17:17
  • jsfiddle.net/BaNru/0z72a91u/1 там одно лишнее действо с .toLowerCase(), там оказывает в одном ригистре, но лишним не будет, я думаю. Но, думаю, можно и убрать jsfiddle.net/BaNru/0z72a91u/2 И забыл про непонятно зачем нужную запись в глобальную jsfiddle.net/BaNru/0z72a91u/3
    – user337101
    7 июн 2019 в 17:34
  • Благодарю это оно)
    – jobananas
    7 июн 2019 в 18:25

Ваш ответ

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

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