diff --git a/index.html b/index.html
index 746e834..7e090df 100755
--- a/index.html
+++ b/index.html
@@ -215,8 +215,7 @@ <h2>&lt;select&gt;</h2>
 					<option>Option 22</option>
 					<option>Option 23</option>
 				</select>
-				<select multiple data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}'>
-					<option selected value="v1">Compact multiple select</option>
+				<select multiple placeholder="Compact multiple select" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false, "useCustomScroll": false, "multipleCompactStyle": true}'>
 					<option value="v2">Option 1</option>
 					<option value="v3">Option 2</option>
 					<option value="v4">Option 3</option>
diff --git a/js/jcf.select.js b/js/jcf.select.js
index 610b4f3..93ad7da 100644
--- a/js/jcf.select.js
+++ b/js/jcf.select.js
@@ -388,7 +388,8 @@
 				selectedOption = this.realElement.prop('options')[selectedIndex],
 				selectedOptionImage = selectedOption ? selectedOption.getAttribute('data-image') : null,
 				selectedOptionText = '',
-				selectedOptionClasses;
+				selectedOptionClasses,
+				self = this;
 
 			if (this.realElement.prop('multiple')) {
 				$.each(this.realElement.prop('options'), function(index, option) {
@@ -396,6 +397,9 @@
 						selectedOptionText += (selectedOptionText ? ', ' : '') + option.innerHTML;
 					}
 				});
+				if (!selectedOptionText) {
+					selectedOptionText = self.realElement.attr('placeholder') || '';
+				}
 				this.selectText.removeAttr('class').html(selectedOptionText);
 			} else if (!selectedOption) {
 				if (this.selectImage) {