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>
Как вариант, просто скрывать остальные списки
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP