CODEWITHSUNDEEP
jqueryjquery-plugins
Suman KC
Suman KC

Reputation: 3528

ddslick selectText not working or appears twice

According to the plugin documentation :

selectText default value 'Select...' Set default text to display when no option is selected.

And her in the code snippet below i have used selectText but it's not appearing 

	jQuery(document).ready(function(){
		jQuery('#demo-htmlselect').ddslick({
			selectText: "Select your favorite social network",
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://sumankc.com/ddslick/jquery.ddslick.min.js"></script>
<select id="demo-htmlselect">
    <option data-description="Description with Facebook" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" value="0">Facebook</option>
    <option data-description="Description with Twitter" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" value="1">Twitter</option>
    <option data-description="Description with LinkedIn" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" value="2">LinkedIn</option>
    <option data-description="Description with Foursquare" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" value="3">Foursquare</option>
</select>

Then, i tried with an option field at first to show select text, and now it appears twice in the dropdown

jQuery(document).ready(function(){
		jQuery('#demo-htmlselect').ddslick({
			selectText: "Select your favorite social network",
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://sumankc.com/ddslick/jquery.ddslick.min.js"></script>
<select id="demo-htmlselect">
    <option>Select your favourite network</option>
    <option data-description="Description with Facebook" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" value="0">Facebook</option>
    <option data-description="Description with Twitter" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" value="1">Twitter</option>
    <option data-description="Description with LinkedIn" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" value="2">LinkedIn</option>
    <option data-description="Description with Foursquare" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" value="3">Foursquare</option>
</select>

How can i achieve the single selectText at initial ?

Upvotes: 1

Views: 811

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

Not to sound snarky but...

According to the plugin documentation :

Create an empty placeholder for the custom drop down: eg:

<div id="myDropdown"></div>

Use a div instead of a select, it'll work.

jQuery(document).ready(function(){
		jQuery('#demo-htmlselect').ddslick({
			selectText: "Select your favorite social network",
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://sumankc.com/ddslick/jquery.ddslick.min.js"></script>
<div id="demo-htmlselect">
    <option data-description="Description with Facebook" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png" value="0">Facebook</option>
    <option data-description="Description with Twitter" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" value="1">Twitter</option>
    <option data-description="Description with LinkedIn" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" value="2">LinkedIn</option>
    <option data-description="Description with Foursquare" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" value="3">Foursquare</option>
</div>

Upvotes: 1

Related Questions