Using href links inside <option> tag with jQuery in the way

Question

I have the following code :

<div class="dropdownmenu">
    <select multiple id="cd-dropdown" name="dropdown-menu" class="cd-select">
        <option value="-1" selected>Social</option>
        <option onClick="window.location = 'http://www.twitter.com'" value="1" class="icon-monkey">Twitter</option>
        <option onClick="window.location = 'http://www.facebook.com'" value="1" class="icon-monkey">Facebook</option>
    </select>        
</div>

I tried adding a link inside the select box with labels, values, onclick but they all failed, I realized that the reason stands in the following jQuery code :

var elName = this.$el.attr( 'name' ), elId = this.$el.attr( 'id' ),
inputName = elName !== undefined ? elName : elId !== undefined ? elId : 'cd-dropdown-' + ( new Date() ).getTime();

this.inputEl = $( '<input type="hidden" name="' + inputName + '" value="' + value + '"></input>' ).insertAfter( this.selectlabel );

this.selectlabel.css( 'z-index', this.minZIndex + this.optsCount );
this._positionOpts();

I couldn't figure out how to change the code in order to allow me to add links.
I thought the jQuery is the problem cause once I remove the "id="cd-dropdown" from the HTML box my links are working but the effects and designs provided by the jQuery doesn't apply anymore.

Answer 1

Use the $('select').change() event :

$('select[name="dropdown-menu"]').change( function(){
    if ( $(this).val() == 1 ){
        //'this' refers to your select
        //insert your code to get the selected url,
        //and call "window.location.href = url"
    }
});