Есть библеотека для стилизации select - selectize.js. Не получается сделать одну из option сделать по умолчанию. Как я вижу решение ситуации: К активному option добавляется класс к примеру "active", который делает его в select значением по умолчанию.
;(function( $, window, undefined ){
$.fn.selectizing = function( options ){
// default options
var settings = $.extend({
color: "#bdbdbd",
title: '',
background: '#fff',
valueHidden: '',
change: function(){}, // event change
}, options );
return this.each(function() {
var selectParent = this,
$selectParent = $(this);
$selectParent.hide();
var listItems = [],
initialWidth,
firstTitle = settings.title;
// preparing array with select options
if( $selectParent.children('option').length == 0 ) return;
$selectParent.children('option').each(function(){
var listItem = $(this),
title = listItem.text(),
selected = listItem.is(':selected') ? 1 : 0;
if(selected && firstTitle == '') firstTitle = title;
listItems.push({
value: listItem.attr('value'),
text: title,
selected: selected,
})
});
var domSelectizing = document.createElement('ul');
domSelectizing.classList.add('dom-selectizing');
var domSelectizingClone = document.createElement('ul');
domSelectizingClone.classList.add('dom-selectizing-clone');
var liFirst = document.createElement('li');
var spanArrow = document.createElement('span');
var spanTitle = document.createElement('span');
spanTitle.classList.add('title');
spanTitle.style.color = settings.color;
spanTitle.innerHTML = firstTitle;
var ulChild = document.createElement('ul');
var numVisibleOptions = 0;
// create each option elements
for (var listItem in listItems) {
var item = listItems[listItem];
var liOption = document.createElement('li');
liOption.dataset.val = item.value;
if(item.selected) liOption.classList.add('selected');
if(item.value == settings.valueHidden) liOption.classList.add('hidden');
else {numVisibleOptions += 1; $(liOption).attr('data-element', numVisibleOptions);}
liOption.innerHTML = item.text;
// adding liOption elements to ulChild element
ulChild.appendChild(liOption);
}
// adding data-elements attribute to ulChild
$(ulChild).attr('data-elements', numVisibleOptions);
// adding elements into their parent elements
liFirst.appendChild(spanArrow);
liFirst.appendChild(spanTitle);
// creating clone domSelectizing for responsive purpose
var clonedLiFirst = liFirst.cloneNode(true);
domSelectizingClone.appendChild(clonedLiFirst);
liFirst.appendChild(ulChild);
domSelectizing.appendChild(liFirst);
// add DOM Selectizing to DOM fust after his own select
$selectParent.before(domSelectizingClone);
$selectParent.after(domSelectizing);
// adding some css to DOM Selectizing box
initialWidth = domSelectizing.clientWidth + 'px';
// preparing some variables
var $DomSelectizing = $(domSelectizing),
$DomSelectizingClone = $(domSelectizingClone),
$spanTitle = $DomSelectizing.find('.title'),
$inputFind = $DomSelectizing.find('.input-search'),
$listOptions = $DomSelectizing.find('li > ul > li'),
$firstSelected = $DomSelectizing.find('li > ul > li');
$DomSelectizingClone.click(function(e) {
$(this).next().next().click();
});
// handle active select
$DomSelectizing.click(function(e) {
e.stopPropagation();
var isOpened = $(this).hasClass('open') ? true : false;
$inputFind.val('');
// closing other DOM Selectizing elements openeds
var allDomSelectizing = document.querySelectorAll('.dom-selectizing');
for(var selectizing in allDomSelectizing) {
var ul = allDomSelectizing[selectizing];
if(ul.tagName == 'UL') ul.classList.remove('open');
}
if( isOpened ) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
$inputFind.focus();
}
$listOptions.show();
}) // end click function
// handle choose option
$listOptions.click(function(e){
var value = $(this).data('val'),
title = $(this).text();
if( $(this).hasClass('selected') ){
//
} else {
$listOptions.removeClass('selected');
$(this).addClass('selected');
}
$DomSelectizing.prev().prev().find('.title').text(title);
$spanTitle.text(title);
$selectParent.val(value);
settings.change.call(selectParent); // call event change
}) // end click function
// handle search
});
}
$('.dropdown').selectizing({
background: '#ffffff',
title: 'Выберите',
change: function(){
var value = $(this).val();
$('#event-change').html(value + ' : ' + text);
}
});
})(jQuery, window)
select {
display: none;
}
/* DOM SELECTIZING */
.dom-selectizing,
.dom-selectizing-clone {
margin:0;
padding:0;
display:inline-block;
font-size:14px;
font-weight:600;
width: 100%;
user-select: none;
position: relative;
}
.dom-selectizing > li:after{
content: '';
position: absolute;
right: 0;
top:0;
border-radius: 50%;
background:#fafafa url(../img/menu-down.png);
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
height:32px;
width:32px;
}
.dom-selectizing-clone {
display: none;
}
.dom-selectizing li,
.dom-selectizing-clone li {
list-style:none;
cursor: pointer;
text-align: left;
}
.dom-selectizing > li,
.dom-selectizing-clone li {
position:relative;
}
.dom-selectizing .title,
.dom-selectizing-clone .title {
font-size:12px;
display: block;
color:#000!important;
font-weight: 600;
line-height: 32px;
position: relative;
}
.dom-selectizing li ul {
display:none;
position:absolute;
top:100%;
width:200px;
background: #FFF;
transition: .2s;
-webkit-transition: .2s;
border: 1px solid #fafafa;
z-index: 999;
padding:10px 5px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.05);
}
.dom-selectizing li ul li {
font-weight: 600;
color:#8d8d8d;
font-size: 12px;
margin:0;
line-height: 2;
}
.dom-selectizing .selected {
color:#757575;
}
.dom-selectizing li ul li:last-child {
border-bottom: none;
}
.dom-selectizing li ul li.hidden {
display: none !important;
}
@-moz-keyframes effect1 {
from{ transform: translateY(15px); opacity:0; }
to{ transform: translateY(0px); opacity:1; }
}
@-webkit-keyframes effect1 {
from{ -webkit-transform: translateY(15px); opacity:0; }
to{ -webkit-transform: translateY(0px); opacity:1; }
}
.open li ul{
display:block;
-moz-animation: effect1 0.3s alternate 1;
-webkit-animation: effect1 0.3s alternate 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="setting_name">
<select class="dropdown">
<option>Мужской</option>
<option>Женский</option>
<option>Собака</option>
<option>Кот</option>
</select>
<h2>День Рождения</h2>
<select class="dropdown">
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
</select>
<select class="dropdown">
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="dropdown">
<option>Март</option>
<option>Апрель</option>
<option>Май</option>
</select>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
"less-autocompile превысил время ожидания 10000 мс " - что это значит? и почему файл перестал работать?
Мне нужно поменять стиль текста в CodeArea в RichTextFxНужно, чтобы текст был подчеркнут линией
Пробую создать приложение на JavaFXДля дизайна приложения использую SceneBuilder
Нужен файл, который будет добавлять в таблицу запись по таймеруТак вот, каким образом можно это сделать? Знаю, что для этого можно использовать...