TransWikia.com

При стилизации и через jQuery выпадающие списки накладываются друг на друга

Stack Overflow на русском Asked on December 23, 2020

Есть способ прописать свои стили css для <select> и <option> (код указала ниже). Но есть проблема: когда два <select> находятся рядом, их выпадающие списки накладываются друг на друга при одновременном открытии (пример в код ниже). Может кто-то понимает как это исправить?

jQuery('#fld_3505334_3,#fld_3505334_1,#fld_3505334_2').each(function () {
    // Variables
    var $this = $(this),
        selectOption = $this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        dur = 500;

    $this.hide();
    // Wrap all in select box
    $this.wrap('<div class="select"></div>');
    // Style box
    $('<div>', {
        class: 'select__gap',
        text: 'Телефон/Мессенджер'
    }).insertAfter($this);

    var selectGap = $this.next('.select__gap'),
        caret = selectGap.find('.caret');
    // Add ul list
    $('<ul>', {
        class: 'select__list'
    }).insertAfter(selectGap);

    var selectList = selectGap.next('.select__list');
    // Add li - option items
    for (var i = 0; i < selectOptionLength; i++) {
        $('<li>', {
            class: 'select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
            .attr('data-value', selectOption.eq(i).val())
            .appendTo(selectList);
    }
    // Find all items
    var selectItem = selectList.find('li');

    selectList.slideUp(0);
    selectGap.on('click', function () {
        if (!$(this).hasClass('on')) {
            $(this).addClass('on');
            selectList.slideDown(dur);

            selectItem.on('click', function () {
                var chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectGap.text($(this).find('span').text());

                selectList.slideUp(dur);
                selectGap.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(dur);
        }
    });

});




jQuery('#fld_3447084_3,#fld_3447084_2,#fld_3447084_1').each(function(){
    // Variables
    var $this = $(this),
        selectOption = $this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        dur = 500;

    $this.hide();
    // Wrap all in select box
    $this.wrap('<div class="select"></div>');
    // Style box
    $('<div>',{
        class: 'select__gap',
        text: 'Специалист'
    }).insertAfter($this);

    var selectGap = $this.next('.select__gap'),
        caret = selectGap.find('.caret');
    // Add ul list
    $('<ul>',{
        class: 'select__list'
    }).insertAfter(selectGap);

    var selectList = selectGap.next('.select__list');
    // Add li - option items
    for(var i = 0; i < selectOptionLength; i++){
        $('<li>',{
            class: 'select__item',
            html: $('<span>',{
                text: selectOption.eq(i).text()
            })
        })
            .attr('data-value', selectOption.eq(i).val())
            .appendTo(selectList);
    }
    // Find all items
    var selectItem = selectList.find('li');

    selectList.slideUp(0);
    selectGap.on('click', function(){
        if(!$(this).hasClass('on')){
            $(this).addClass('on');
            selectList.slideDown(dur);

            selectItem.on('click', function(){
                var chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectGap.text($(this).find('span').text());

                selectList.slideUp(dur);
                selectGap.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(dur);
        }
    });

});
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.select {
    display: inline-block;
    vertical-align: top; 
    width: 100%;
}

.select-wrap {
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
}

.select-wrap select {
    margin: 20px;
}

.select__gap {
    cursor: pointer;
    position: relative;
    color: #A1A1A1;
    border-bottom: 1px solid #D9D9D9 !important;
    padding: 6px 0px 6px 0px !important;
}

.select__list {
    width: 330px;
    border-radius: 0px 0px 20px 20px;
    margin: 0px 0;
    position: absolute;
    background: #fff;
    z-index: 9999;
}

.select__list.on {
    display: block;
}

.select__item span {
    display: block;
    cursor: pointer;
}

.select__gap:after {
    content: url(/wp-content/uploads/2020/09/dropdown.svg);
    display: block;
    width: 12px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: 0%;

    -webkit-transition: all .27s ease-in-out;
         -o-transition: all .27s ease-in-out;
            transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}

.on.select__gap:after {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="fld_3505334" value="" data-field="fld_3505334" class="form-control" id="fld_3505334_2" required="required" aria-labelledby="fld_3505334Label" style="display: none;">
<option value="" disabled="" selected="">Телефон/Мессенджер </option>
<option value="Имплантолог" data-calc-value="Телефон">Телефон</option>
<option value="Хирург" data-calc-value="Viber">Viber</option>
<option value="Ортопед" data-calc-value="WhatsApp">WhatsApp</option>
<option value="Терапевт" data-calc-value="Telegram">Telegram</option>
</select>
              
<select name="fld_3447084" value="" data-field="fld_3447084" class="form-control" id="fld_3447084_2" required="required" aria-labelledby="fld_3447084Label" style="display: none;">
<option value="" disabled="" selected="">Телефон/Мессенджер</option>
<option value="Имплантолог" data-calc-value="Телефон">Имплантолог</option>
<option value="Хирург" data-calc-value="Viber">Хирург</option>
<option value="Ортопед" data-calc-value="WhatsApp">Ортопед</option>
<option value="Терапевт" data-calc-value="Telegram">Терапевт</option>
<option value="Ортодонт" data-calc-value="Ортодонт">Ортодонт</option>
</select>

One Answer

Как вариант, просто скрывать остальные списки

jQuery('#fld_3505334_3,#fld_3505334_1,#fld_3505334_2').each(function () {
    // Variables
    var $this = $(this),
        selectOption = $this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        dur = 500;

    $this.hide();
    // Wrap all in select box
    $this.wrap('<div class="select"></div>');
    // Style box
    $('<div>', {
        class: 'select__gap',
        text: 'Телефон/Мессенджер'
    }).insertAfter($this);

    var selectGap = $this.next('.select__gap'),
        caret = selectGap.find('.caret');
    // Add ul list
    $('<ul>', {
        class: 'select__list'
    }).insertAfter(selectGap);

    var selectList = selectGap.next('.select__list');
    // Add li - option items
    for (var i = 0; i < selectOptionLength; i++) {
        $('<li>', {
            class: 'select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
            .attr('data-value', selectOption.eq(i).val())
            .appendTo(selectList);
    }
    // Find all items
    var selectItem = selectList.find('li');

    selectList.slideUp(0);
    selectGap.on('click', function () {
        if (!$(this).hasClass('on')) {
            $(this).addClass('on');
            selectList.slideDown(dur);

            selectItem.on('click', function () {
                var chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectGap.text($(this).find('span').text());

                selectList.slideUp(dur);
                selectGap.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(dur);
        }
    });

});




jQuery('#fld_3447084_3,#fld_3447084_2,#fld_3447084_1').each(function(){
    // Variables
    var $this = $(this),
        selectOption = $this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        dur = 500;

    $this.hide();
    // Wrap all in select box
    $this.wrap('<div class="select"></div>');
    // Style box
    $('<div>',{
        class: 'select__gap',
        text: 'Специалист'
    }).insertAfter($this);

    var selectGap = $this.next('.select__gap'),
        caret = selectGap.find('.caret');
    // Add ul list
    $('<ul>',{
        class: 'select__list'
    }).insertAfter(selectGap);

    var selectList = selectGap.next('.select__list');
    // Add li - option items
    for(var i = 0; i < selectOptionLength; i++){
        $('<li>',{
            class: 'select__item',
            html: $('<span>',{
                text: selectOption.eq(i).text()
            })
        })
            .attr('data-value', selectOption.eq(i).val())
            .appendTo(selectList);
    }
    // Find all items
    var selectItem = selectList.find('li');

    selectList.slideUp(0);
    selectGap.on('click', function(){
        if(!$(this).hasClass('on')){
            $(this).addClass('on');
            selectList.slideDown(dur);

            selectItem.on('click', function(){
                var chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectGap.text($(this).find('span').text());

                selectList.slideUp(dur);
                selectGap.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(dur);
        }
    });

});

var selectGap = '.select__gap', selectList = '.select__list';
$(selectGap).on('click', function(event) {
    $(selectGap).not(this).each(function() {
        $(this).removeClass('on');
        $(this).next(selectList).slideUp(0);
    });
});
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.select {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.select-wrap {
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
}

.select-wrap select {
    margin: 20px;
}

.select__gap {
    cursor: pointer;
    position: relative;
    color: #A1A1A1;
    border-bottom: 1px solid #D9D9D9 !important;
    padding: 6px 0px 6px 0px !important;
}

.select__list {
    width: 330px;
    border-radius: 0px 0px 20px 20px;
    margin: 0px 0;
    position: absolute;
    background: #fff;
    z-index: 9999;
}

.select__list.on {
    display: block;
}

.select__item span {
    display: block;
    cursor: pointer;
}

.select__gap:after {
    content: url(/wp-content/uploads/2020/09/dropdown.svg);
    display: block;
    width: 12px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: 0%;

    -webkit-transition: all .27s ease-in-out;
    -o-transition: all .27s ease-in-out;
    transition: all .27s ease-in-out;

    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.on.select__gap:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="fld_3505334" value="" data-field="fld_3505334" class="form-control" id="fld_3505334_2" required="required" aria-labelledby="fld_3505334Label" style="display: none;">
    <option value="" disabled="" selected="">Телефон/Мессенджер </option>
    <option value="Имплантолог" data-calc-value="Телефон">Телефон</option>
    <option value="Хирург" data-calc-value="Viber">Viber</option>
    <option value="Ортопед" data-calc-value="WhatsApp">WhatsApp</option>
    <option value="Терапевт" data-calc-value="Telegram">Telegram</option>
</select>

<select name="fld_3447084" value="" data-field="fld_3447084" class="form-control" id="fld_3447084_2" required="required" aria-labelledby="fld_3447084Label" style="display: none;">
    <option value="" disabled="" selected="">Телефон/Мессенджер</option>
    <option value="Имплантолог" data-calc-value="Телефон">Имплантолог</option>
    <option value="Хирург" data-calc-value="Viber">Хирург</option>
    <option value="Ортопед" data-calc-value="WhatsApp">Ортопед</option>
    <option value="Терапевт" data-calc-value="Telegram">Терапевт</option>
    <option value="Ортодонт" data-calc-value="Ортодонт">Ортодонт</option>
</select>

Correct answer by Vadim Belyaev on December 23, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP