The event handler to select

Question

I took the example of the here, Demo 6

Everything works fine, however I can not figure out how to put handler, which would take from there value. That is, that when you change the selector to change "content." Here is the code of the selector:

    <select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
    </select>

, But on the page is already displayed

 <div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
   </div>

, I realized that this "transformation" occurs

jquery.dropdown.js

---

created 2 forms, forma1 with id = "f1", and similarly form2 c id = "f2", one form did hide. Put on Select

onChange="a(this.value)"

,

function a(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

Neutral select works, but this is not. If the console browser call a function with a certain value, for example: а(2) , all the normal output.

So like where to put the event handler, it checks the value of the hidden field???

Thanks in advance

Answer 1

DEMO

HTML:

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

<div id="div1" class="animalDiv">MONKEY</div>
<div id="div2" class="animalDiv">BEAR</div>
<div id="div3" class="animalDiv">SQUIRREL</div>
<div id="div4" class="animalDiv">ELEPHANT</div>

CSS:

.animalDiv {
 display:none;
}

JS/jQuery:

$(function() {
    $('#cd-dropdown').dropdown({
        gutter: 5,
        stack: false,
        delay: 100,
        slidingIn: 100,
        onOptionSelect: function(e) {
            var _counter = ($(e).html()).split('data-value="')[1].split('"')[0];
            $(".animalDiv").hide();
            $("#div" + _counter).show();
        }
    });
});​

*NOTE: I should note that I also made a change in jquery.dropdown.js:

val !== -1 ? classes !== undefined ? optshtml += '<li><span data-value="' + val + '" class="' + classes + '">' + label + '</span></li>' : optshtml += '<li><span data-value="' + val + '">' + label + '</span></li>' : selectlabel = label;

moving data-value from li to span

Answer 2

I am not sure exactly what you are asking, however I am going to take stab at it.

I assume you are asking how to add a handler to a click on one of the 'options'. that is to say when someone clicks on 'Monkey' you want to handle that click with a function.

From looking at the plugin source I see they have allowed for an option called 'onOptionSelect'. I did not see any explanation or documentation on this option, but it would appear, from looking at the source, that this is the handler for the click event:

this.opts.on( 'click.dropdown', function() {
        if( self.opened ) {
            var opt = $( this );
            self.options.onOptionSelect( opt );
            self.inputEl.val( opt.data( 'value' ) );
            self.selectlabel.html( opt.html() );
            self.close();
        }
   } );

here you can see that they are calling the 'onOptionSelect' function and passing in the selected item as the only parameter. So when you are creating the dropdown in your script, add the function for your handler:

$('#cd-dropdown').dropdown({onOptionSelect: aHandler});

function aHandler(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

In this way you could write a handler and do whatever you wanted with that value when the options are clicked.

If you are instead trying to figure out what item is selected in the 'dropdown', you need to query for the 'hidden' with the name of 'cd-dropdown'. This hidden input has the selected value:

$('input[name="cd-dropdown"]').val() --> equals the selected value

I hope this is helpful. I think that that plugin needs a bit more documentation.

Answer 3

$('#cd-dropdown').dropdown({
            onOptionSelect: function (opt) {
                alert(opt.data('value'));
                return false;
            }
        });