Значение option по умолчанию в selectize.js

361
17 марта 2018, 15:51

Есть библеотека для стилизации 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>

READ ALSO
препроцессор less

препроцессор less

"less-autocompile превысил время ожидания 10000 мс " - что это значит? и почему файл перестал работать?

388
Rich Text Fx поменять стиль текста

Rich Text Fx поменять стиль текста

Мне нужно поменять стиль текста в CodeArea в RichTextFxНужно, чтобы текст был подчеркнут линией

222
Изменение цвета MenuItem при наведении в MenuButton

Изменение цвета MenuItem при наведении в MenuButton

Пробую создать приложение на JavaFXДля дизайна приложения использую SceneBuilder

219
Как сделать добавление записи в базу данных по таймеру?

Как сделать добавление записи в базу данных по таймеру?

Нужен файл, который будет добавлять в таблицу запись по таймеруТак вот, каким образом можно это сделать? Знаю, что для этого можно использовать...

206