0

i just downloaded the source code from this topic

http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

demo http://tympanus.net/Development/SimpleDropDownEffects/index6.html

and added it to one of my project and works fine but i want to add links as values to link to any website as ahref i found some things to another topics but didn't work with me and it was written from long time so that i added this topic 

<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
   <option value="-1" selected>choose an option to test</option>
   <option value="1" class="icon-monkey">Students</option>
   <option value="2" class="icon-bear">Courses</option>
   <option value="3" class="icon-squirrel">Instructors</option>
   <option value="4" class="icon-elephant">Departments</option>

3 Answers3

3

Try this

 <select id="cd-dropdown" name="cd-dropdown" class="cd-select">
   <option value="-1" selected>choose an option to test</option>
   <option value="1" class="icon-monkey">Students</option>
   <option value="2" class="icon-bear">Courses</option>
   <option value="3" class="icon-squirrel">Instructors</option>
   <option value="4" class="icon-elephant">Departments</option> 
</select>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

    jQuery('#cd-dropdown').on('change', function(){
        if(jQuery(this).val() == 1){
        window.location.href = 'http://google.com'
        }
        // and so on
        })
</script>

You have to give the destination URL for all options jQuery code.

Pothys Ravichandran
  • 345
  • 1
  • 4
  • 10
  • thanks for your comment this is solve my question but to make it work and link to another site i should disable other function that made in this demo as i want to do http://tympanus.net/Development/SimpleDropDownEffects/index6.html maybe should try to build anew one from scratch using ul tag and style it @POTHYS STALIN –  Nov 20 '14 at 05:40
0

Try this

$('#cd-dropdown').on('change', function(){
var value = $(this).val();
if(value == 1){ // that is for Students
window.location.href = 'http://google.com';
}
// and so on
})
Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28
0

Try This

$('.cd-dropdown li').click(function(){
  if($(this).attr('data-value')==1){
    window.location.href = 'http://google.com';
  }

})

The plugin replaces select box [id=cd-dropdown] with ul [class=cd-dropdown]

Sreeraj
  • 316
  • 1
  • 8